Slot Example Vue
This page assumes you’ve already read the Components Basics.Read that first if you are new to components. Vue implements a content distribution API that’s modeled after the current Web Components spec draft, using the slot element to serve as distribution outlets for content.
- For example, let's say we wanted to populate a modal. Computed properties are the most important feature in Vue. Sure, scoped slots let you create some nice.
- Slots are especially useful when the component composition underneath the parent component isn't always the same. Take the following example where we have a page component. The content of the page could change based on whether that page displays e.g. An article, blog post or form.
# Calendar widget
Vue date pick can be used in calendar widget form.
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
29 | 31 | 2 | ||||
4 | 6 | 8 | 10 | |||
12 | 14 | 16 | ||||
18 | 20 | 22 | 24 | |||
26 | 28 | 2 |
Show code
# Date format
Simple date picker with custom format (default is 'YYYY-MM-DD'):
Show code
# Display format
Use display format prop when UI date format is different from raw data format.
Show code
# Custom date parser
Vue date pick comes with simple date parser.If you need to work with complex date formats feel free to inject implementation of your choice.
Show code
Slot-scope Vue Example
# Date time picker
Date picker with controls for hours and minutes:
Show code
# Date time picker (AM/PM)
Date time picker with hours displayed using 12 hour clock:
Show code
# Custom start period
Open calendar UI with custom start month / year period:
Show code
# Custom content with slot
Replace default input controls with custom slot content:
Show code
# Disabling dates
Set 'isDateDisabled' function as component prop to disable dates:
Show code
# Disabling manual input
Manual user input can be disabled by setting input readonly attribute via 'inputAttributes' prop.
Show code
# Disable editing and picker UI
Disable input editing and calendar UI by setting 'editable' prop to false.
Show code
# Start week on Sunday
Sunday can be set as the first day of the week via 'startWeekOnSunday' prop.
Show code
# Change selectable years
Dropdown for selecteble years can be customized via selectableYearRange prop(default value is 40 years from and after current year).
Show code
Cupertino Pane for Vue 3
A Vue 3 Wrapper for Cupertino Library.
Actually kinda easy
Example
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.
Props
| 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 |
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 |
How to get access to the public method from the Cupertino Instance inside the component <v-cupertino />
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
Getting the instance with refs
Sample code
Getting the instance from @did-present or @will-present event
Sample code
Slot Example Vueling
Using public methods
Slot Example Vuelos
Here an overview of all the public methods
Slot Example Vue Bar
Using the refs example to access public methods