Cupertino Pane for Vue 3
Notes: if your are looking for vue 2 repo here Cupertino-Pane for vue 2
Actually kinda easy
npm i v-cupertino
The component just have one simple slot where you can easily put one or multiple components (by wrapping it in a template or wrap element like a div), doesn't have any special v-slots, any component or html element used will fallback into v-slot:default.
<template>
<v-cupertino>
<div>Hola mundo!<div>
<div>Adiós mundo cruel!</div>
<v-cupertino>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import VCupertino from "v-cupertino";
export default defineComponent({
name: "App",
components: {
VCupertino
}
})
</script>
props | type | example | comments |
---|---|---|---|
:drawerOptions ( optional ) | CupertinoSettings |
<v-cupertino :drawerOptions="yourSettingsObject"> |
The same as the Cupertinos Options; constraints you cannot override cupertino's callbacks even if you specified in the CupertinoSettings ' Object |
:entryAnimation ( optional ) | Boolean |
<v-cupertino :entryAnimation="Boolean"> |
Whether the drawer should present, destroy or hide with a smooth animation |
:entryComponent ( optional ) | Component |
<v-cupertino :entryComponent="Component"> |
The component itself use slots, but I think it would be faster to toggle between component from scripts instead of using v-if also components remember their state because are wrapped by <keep-alive> tag |
:isPresent | Boolean | <v-cupertino :entryComponent="Component"> |
Whether the component should be present or hide, when initialize; default: true |
:id | Number | String | <v-cupertino :id="2"> |
If you have multiples v-cupertino components in the same app that might be working in the same time could crash the library cupertino-pane due that all of them are using the same selector class to create a new pane, using custom id, will allow you to use multiples v-cupertino components as much as you want |
Note: Are the same hooks as the Cupertino pane but instead of camelCase are kebak-case and without the prefix on: @will-dismiss, @backdrop-tap...
events | return | comments |
---|---|---|
@did-dismiss | () => void |
|
@will-dismiss | () => void |
|
@did-present | () => cupertinoInstance |
Returns: the cupertino instance inside the component when the drawer is already visible, this is useful when you need to have access to the instance once is visible |
@will-present | () => cupertinoInstance |
Returns: the cupertino instance inside the component when the drawer will be visible, this is useful when you need to have access to the instance before is visible |
@drag-start | () => number |
Returns: the property y from the method getBoundingClientRect() that belongs to the DOMRect |
@drag | () => number |
Returns: the property y from the method getBoundingClientRect() that belongs to the DOMRect |
@drag-end | () => number |
Returns: the property y from the method getBoundingClientRect() that belongs to the DOMRect |
@backdrop-tap | () => void |
|
@transition-start | () => void |
|
@transition-end | () => void |
There are actually three ways to get the instance from <v-cupertino />
component from its parent container:
- refs
- From the instance returned by @did-present event
- From the instance returned by @will-present event
Sample code
<template>
<v-cupertino ref="cupertinoRef">
<div>Hola mundo!<div>
<v-cupertino>
</template>
<script lang="ts">
import { CupertinoPane } from "cupertino-pane";
import { defineComponent, onMounted, ref, Ref } from "vue";
import VCupertino from "./components/VCupertino.vue";
export default defineComponent({
name: "App",
components: {
VCupertino,
},
setup() {
const cupertinoRef: Ref<typeof VCupertino> = ref(VCupertino);
onMounted(() => {
const cupertino = cupertinoRef.value.cupertino as CupertinoPane;
cupertino.setDarkMode({ enable: true });
console.log(cupertino);
});
return {
cupertinoRef,
};
},
});
</script>
Sample code
<template>
<v-cupertino @did-present="hook">
<div>Hola mundo!<div>
<v-cupertino>
</template>
<script lang="ts">
import { CupertinoPane } from "cupertino-pane";
import { defineComponent, onMounted, ref, Ref } from "vue";
import VCupertino from "./components/VCupertino.vue";
export default defineComponent({
name: "App",
components: {
VCupertino,
},
setup() {
const hook = ({ value }: Ref<CupertinoPane>) => {
console.log(value);
}
return {
hook,
};
},
});
</script>
Here an overview of all the public methods
Using the refs example to access public methods
import { CupertinoPane } from "cupertino-pane";
import { defineComponent, onMounted, ref, Ref } from "vue";
import VCupertino from "./components/VCupertino.vue";
export default defineComponent({
name: "App",
components: {
VCupertino,
},
setup() {
const cupertinoRef: Ref<typeof VCupertino> = ref(VCupertino);
onMounted(() => {
const cupertino = cupertinoRef.value.cupertino as CupertinoPane;
cupertino.setDarkMode({ enable: Boolean }); // param:
cupertino.moveToBreak(String); // Will change pane position with animation to selected breakpoint. param: required('top' | 'middle' | 'bottom')
cupertino.moveToHeight(Number); // Will move pane to exact height with animation. Breakpoints will saved. param: required
cupertino.hide(); // Dissappear pane from screen, still keep pane in DOM.
cupertino.present({ animated: Boolean }); // Will render pane DOM and show pane with setted params. param: optional
cupertino.destroy({ animated: Boolean }); // Remove pane from DOM and clear styles
// to check more public methods to *overview* that is above
});
return {
cupertinoRef,
};
},
});
Notes: In case you need more information about the library, remember that this is only a wrapper, for more information go to the oficial Cupertino Pane library.
Licensed under the MIT License. View original LICENSE Project's LICENSE
Lol, that's all, thanks