-
Get Started
-
Vue Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- 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
Panel Vue Component
Panel Vue component represents Side Panels component.
Panel Components
There are following components included:
f7-panel
- Panel element
Panel Properties
Prop | Type | Default | Description |
---|---|---|---|
side | string | Panel side. Could be left or right |
|
left | boolean | Shortcut prop for side="left" |
|
right | boolean | Shortcut prop for side="right" |
|
effect | string | Panel effect. Could be cover or reveal |
|
cover | boolean | Shortcut prop for effect="cover" |
|
reveal | boolean | Shortcut prop for effect="reveal" |
|
opened | boolean | Allows to open/close panel and set its initial state |
Panel Methods
.open(animate) | Open panel |
.close(animate) | Close panel |
Panel Events
Event | Description |
---|---|
panel:open | Event will be triggered when Panel starts its opening animation |
panel:opened | Event will be triggered after Panel completes its opening animation |
panel:close | Event will be triggered when Panel starts its closing animation |
panel:closed | Event will be triggered after Panel completes its closing animation |
panel:backdrop-click | Event will be triggered when the panel backdrop is clicked |
panel:swipe | Event will be triggered for swipe panels during touch swipe action |
panel:swipeopen | Event will be triggered in the very beginning of opening it with swipe |
panel:breakpoint | Event will be triggered when it becomes visible/hidden when app width matches its breakpoint |
Open And Close Panel
You can control panel state, open and closing it:
- using Panel API
- by passing
true
orfalse
to itsopened
prop - by clicking on Link or Button with relevant
panel-open
property (to open it) andpanel-close
property to close it
Access To Panel Instance
You can access Panel initialized instance by accessing .f7Panel
component's property.
Examples
<f7-app>
<!-- Left Panel with Reveal effect -->
<f7-panel left reveal>
<f7-view>
<f7-page>
<f7-block>Left panel content</f7-block>
</f7-view>
</f7-panel>
<!-- Right Panel with Cover effect and dark layout theme -->
<f7-panel right theme-dark>
<f7-view>
<f7-page>
<f7-block>Right panel content</f7-block>
</f7-view>
</f7-panel>
<!-- Main view -->
<f7-view main>
<f7-page>
<f7-navbar title="Panel"></f7-navbar>
<f7-block class="row">
<f7-col>
<f7-button raised panel-open="left">Open left panel</f7-button>
</f7-col>
<f7-col>
<f7-button raised panel-open="right">Open right panel</f7-button>
</f7-col>
</f7-block>
</f7-page>
</f7-view>
</f7-app>