SponsorsBecome a sponsor
- Get Started
- Svelte Components
- App
- Accordion
- Action Sheet / Actions
- Area Chart
- Autocomplete
- Badge
- Block / Content Block
- Breadcrumbs
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Color Picker
- Contacts List
- Data Table
- Dialog
- Floating Action Button / FAB
- Form Storage
- Gauge
- Grid / Layout Grid
- Icon
- Infinite Scroll
- Inputs / Form Inputs
- Link
- List View
- List Button
- List Index
- List Item
- Login Screen
- Menu List
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Pull To Refresh
- Radio
- Range Slider
- Searchbar
- Segmented
- Sheet Modal
- Skeleton
- Smart Select
- Sortable
- Stepper
- Subnavbar
- Swipeout
- Swiper
- Tabs
- Text Editor
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Tooltip
- Treeview
- View
- Virtual List
Panel Svelte Component
Panel Svelte component represents Side Panels component.
Panel Components
There are following components included:
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. Can be cover, reveal or push | |
| cover | boolean | Shortcut prop for effect="cover" | |
| reveal | boolean | Shortcut prop for effect="reveal" | |
| push | boolean | Shortcut prop for effect="push" | |
| floating | boolean | Shortcut prop for effect="floating" | |
| visibleBreakpoint | number | Minimal app width (in px) when left panel becomes always visible | |
| collapsedBreakpoint | number | Minimal app width (in px) when left panel becomes partially visible (collapsed) | |
| swipe | boolean | false | Enable if you want to enable ability to open/close panel with swipe |
| swipeNoFollow | boolean | false | Fallback option for potentially better performance on old/slow devices. If you enable it, then swipe panel will not follow your finger during touch move, it will be automatically opened/closed on swipe left/right. |
| swipeActiveArea | number | 0 | Width (in px) of invisible edge from the screen that triggers panel swipe |
| swipeOnlyClose | boolean | false | This parameter allows to close (but not open) panel with swipes. (swipe should be also enabled) |
| swipeThreshold | number | 0 | Panel will not move with swipe if "touch distance" will be less than this value (in px). |
| backdrop | boolean | true | Enables Panel backdrop (dark semi transparent layer behind) |
| backdropEl | HTMLElement string | HTML element or string CSS selector of custom backdrop element | |
| closeByBackdropClick | boolean | true | Enable/disable ability to close panel by clicking outside of panel |
| resizable | boolean | false | Enables/disables resizable panel |
| containerEl | HTMLElement string | Element to mount panel to (default to app root element) | |
| opened | boolean | Allows to open/close panel and set its initial state |
Panel Events
| Event | Description |
|---|---|
| panelOpen | Event will be triggered when Panel starts its opening animation |
| panelOpened | Event will be triggered after Panel completes its opening animation |
| panelClose | Event will be triggered when Panel starts its closing animation |
| panelClosed | Event will be triggered after Panel completes its closing animation |
| panelBackdropClick | Event will be triggered when the panel backdrop is clicked |
| panelSwipe | Event will be triggered for swipe panels during touch swipe action |
| panelSwipeOpen | Event will be triggered in the very beginning of opening it with swipe |
| panelCollapsedBreakpoint | Event will be triggered when it becomes visible/hidden when app width matches its collapsedBreakpoint |
| panelBreakpoint | Event will be triggered when it becomes visible/hidden when app width matches its visibleBreakpoint |
Open And Close Panel
You can control panel state, open and closing it:
- using Panel API
- by passing
trueorfalseto itsopenedprop - by clicking on Link or Button with relevant
panelOpenproperty (to open it) andpanelCloseproperty to close it
Access To Panel Instance
You can access Panel initialized instance by calling .instance() component's method. For example:
<Panel bind:this={component}>...</Panel>
<script>
let component;
// to get instance in some method
component.instance()
</script>
Examples
panel.svelte
<script>
import { Navbar, Page, Block, Button, Panel, Link } from 'framework7-svelte';
</script>
<Page id="panel-page">
<Navbar title="Panel / Side panels" />
<Panel left cover containerEl="#panel-page" id="panel-nested">
<Page>
<Block strongIos outlineIos>
<p>This is page-nested Panel.</p>
<p>
<Link panelClose>Close me</Link>
</p>
</Block>
</Page>
</Panel>
<Block strongIos outlineIos>
<p>
Framework7 comes with 2 panels (on left and on right), both are optional. You can put
absolutely anything inside: data lists, forms, custom content, and even other isolated app
view (like in right panel now) with its own dynamic navbar.
</p>
</Block>
<Block strongIos outlineIos>
<p class="grid grid-cols-2 grid-gap">
<Button raised fill panelOpen="left">Open left panel</Button>
<Button raised fill panelOpen="right">Open right panel</Button>
</p>
<p>
<Button raised fill panelOpen="#panel-nested">Open nested panel</Button>
</p>
</Block>
</Page>