@bazumax/v2-cupertino NPM

Cupertino Pane for Vue 2

Notes: if your are looking for vue 3 repo here Cupertino-Pane for vue 3
Installation

Actually kinda easy

  npm i -D v2-cupertino

How works

Slot

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>
    <v2-cupertino>
      <div>Hola mundo!<div>
      <div>Adiós mundo cruel!</div>
    <v2-cupertino>
  </template>

  <script>
    import V2Cupertino from 'v2-cupertino';

    export default {
        name: 'App',
        components: {
            V2Cupertino
        }
    }

  </script>

Props

props	type	example	comments
:drawerOptions ( optional )	`CupertinoSettings`	`<v2-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`	`<v2-cupertino :entryAnimation="Boolean">`	Whether the drawer should present, destroy or hide with a smooth animation
:entryComponent ( optional )	`Component`	`<v2-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	`<v2-cupertino :entryComponent="Component">`	Whether the component should be present or hide, when initialize; default: true
:id	Number \| String	`<v2-cupertino :id="2">`	If you have multiples v2-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 v2-cupertino components as much as you want

Events

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`

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.

License

Licensed under the MIT License. View original LICENSE Project's LICENSE

Lol, that's all, thanks

core-js cupertino-pane vue

@everything-registry/sub-chunk-114 @infinitebrahmanuniverse/nolb-_baz @zalastax/nolb-_baz

1.2.82

2 years ago