SponsorsBecome a sponsor
- Get Started
- Vue 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
View Vue Component
View - is a separate visual part of app with its own settings, navigation and history. Each view also may have different navbar and toolbar layouts, different styles. So it is some kind of app in app. Such kind of functionality allows you easily manipulate each part of your app.
View Vue component represents Framework7's View component.
View Components
There are following components included:
f7-view- single View-router componentf7-views- wrapper element for multiple views used as Tabs
View Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| <f7-view> properties | |||
| init | boolean | true | Initializes View automatically |
| tab | boolean | Uses View as Tab | |
| tab-active | boolean | Defines View-Tab as currently active Tab | |
View Vue component also accepts all View Parameters. All of them can be passed via separate props on <f7-view> component | |||
| <f7-views> properties | |||
| tabs | boolean | Uses Views as Tabs wrapper container | |
View Events
Swipe-back related events are available only in iOS theme.
| Event | Description |
|---|---|
| view:init | Event will be triggered on View initialization |
| view:resize | Event will be triggered on Master Detail resize (when masterDetailResizable enabled) |
| swipeback:move | Event will be triggered during swipe back move |
| swipeback:beforechange | Event will be triggered right before swipe back animation to previous page when you release it |
| swipeback:afterchange | Event will be triggered after swipe back animation to previous page when you release it |
| swipeback:beforereset | Event will be triggered right before swipe back animation to current page when you release it |
| swipeback:afterreset | Event will be triggered after swipe back animation to current page when you release it |
| tab:show | Event will be triggered when View-Tab becomes visible/active |
| tab:hide | Event will be triggered when View-Tab becomes invisible/inactive |
Access To View Instance
If you use automatic initalization to init the View (with init:true prop) and need to use View API (like router) you can access its initialized instance:
- if you have passed name property (e.g. "left") you can access it like
f7.views.left - main view (with main="true" prop) is always accessible via
f7.views.main
Examples
Minimal layout
<f7-view main>
...
</f7-view>
<!-- Renders to: -->
<div class="view view-main">
...
</div>Views As Tabs
<f7-app>
...
<f7-views tabs>
<f7-view id="tab-1" main tab tab-active>...</f7-view>
<f7-view id="tab-2" tab>...</f7-view>
</f7-views>
...
</f7-app>
<!-- Renders to: -->
<div class="framework7-root">
<div class="views tabs">
<div class="view view-main tab tab-active" id="tab-1">...</div>
<div class="view tab" id="tab-2">...</div>
</div>
</div>
With parameters
<f7-view
url="/home/"
:animate="false"
:ios-dynamic-navbar="false"
:browser-history="true"
>
...
</f7-view>