-
Get Started
-
Vue Components
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
Sheet Modal Vue Component
Sheet Modal is a special overlay type which is similar to Picker/Calendar's overlay. Such modal allows to create custom picker overlays with custom content.
Sheet Modal Vue component represents Sheet Modal component.
Sheet Modal Components
There are following components included:
f7-sheet
- sheet modal element
Sheet Modal Properties
Prop | Type | Description |
---|---|---|
<f7-sheet> properties | ||
backdrop | boolean | Enable to render additional sheet modal backdrop when required |
opened | boolean | Allows to open/close Sheet Modal and set its initial state |
Sheet Modal Methods
<f7-sheet> methods | |
---|---|
.open(animate) | Open sheet modal |
.close(animate) | Close sheet modal |
Sheet Modal Events
Event | Description |
---|---|
<f7-sheet> events | |
sheet:open | Event will be triggered when Sheet Modal starts its opening animation |
sheet:opened | Event will be triggered after Sheet Modal completes its opening animation |
sheet:close | Event will be triggered when Sheet Modal starts its closing animation |
sheet:closed | Event will be triggered after Sheet Modal completes its closing animation |
Open And Close Sheet Modal
You can control Sheet Modal state, open and closing it:
- using its Sheet Modal API
- by passing
true
orfalse
to itsopened
prop - by clicking on Link or Button with relevant
sheet-open
property (to open it) andsheet-close
property to close it
Access To Sheet Modal Instance
You can access Sheet Modal initialized instance by accessing .f7Sheet
component's property.
Examples
<!-- Sheet Modal -->
<f7-sheet>
<!-- Sheet Modal content goes here -->
</f7-sheet>
Renders to:
<!-- Sheet Modal -->
<div class="sheet-modal">
<div class="sheet-modal-inner">
<!-- Sheet Modal content goes here -->
</div>
</div>