Get Started
Vue Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
- Forms
  - Checkboxes & Radios
  - Form Elements
  - Smart Select
- Icon
- Grid / Layout Grid
- Lists
  - List
  - List Item
  - List Button
  - Accordion List
  - Contacts List
  - Sortable List
  - Swipeout List
  - Virtual List
- Link
- Messages
- Message Bar
- Modals
  - Action Sheet
  - Login Screen
  - Picker Modal
  - Popover
  - Popup
- Navigation Bars
  - Navbar
  - Toolbar/Tabbar
  - Sub Navbar
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View

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.

Usage examples

Minimal layout

<f7-view main>
  ...
</f7-view>

Renders to:

<div class="view view-main">
  ...
</div>

As a Tab

<f7-view id="tab-1" main tab active>...</f7-view>
<f7-view id="tab-2" tab>...</f7-view>

Renders to:

<div class="view view-main tab active" id="tab-1">...</div>
<div class="view tab" id="tab-2">...</div>

Empty

<f7-view main navbar-through></f7-view>

Renders to:

<div class="view view-main navbar-through">
  <!-- Navbar will be added automatically as it is needed for through-type layout -->
  <div class="navbar"></div>
  <!-- Pages will be added automatically as it is required for routing -->
  <div class="pages"></div>
</div>

With parameters

<f7-view :dynamic-navbar="true" :url="/home/" :animate-pages="false">...</f7-view>

Properties

Prop	Type	Default	Description
main	boolean		Defines this View as the main View
name	string		Defines View name to allow access View instance by same named prop of `$f7.views`
tab	boolean		Uses View as Tab
active	boolean		Defines View-Tab as currently active Tab
theme	string		View theme color. One of default colors
layout	string		View layout theme. One of default layout themes
navbar-fixed	boolean		Enable when you use fixed navbar layout
navbar-through	boolean		Enable when you use through navbar layout
toolbar-fixed	boolean		Enable when you use fixed toolbar layout
toolbar-through	boolean		Enable when you use through toolbar layout
tabbar-fixed	boolean		Enable when you use fixed tabbar layout
tabbar-through	boolean		Enable when you use through tabbar layout
tabbar-labels-fixed	boolean		Enable when you use fixed tabbar layout
tabbar-labels-through	boolean		Enable when you use through tabbar layout
View Instance Properties
init	boolean	true	Initializes View automatically
params	object		Object with View API parameters
View API Separate Props
dynamicNavbar	boolean	false	Set to true to enable Dynamic Navbar in this View iOS theme only
url	string	undefined	Default (initial) View's url. If not specified, then it is equal to document url
domCache	boolean	true	If enabled then all previous pages in navigation chain will not be removed from DOM when you navigate deeper and deeper. It could be useful, for example, if you have some Form from 5 steps (5 pages) and when you are on last 5th page you need access to form that was on 1st page.
linksView	string / View instance	undefined	CSS Selector of another view or initialized View instance. By defaul all links in initialized (only) view will load pages in this view. You can change this logic on the fly by changing this paremeter. This tell links to load pages in other view.
uniqueHistory	boolean		Set to true and App will keep View's navigation history unique, it will also remove duplicated pages. By default, equal to the same App's parameter. Allows to override global App parameter for current View
uniqueHistoryIgnoreGetParameters	boolean	false	Use this parameter in addition to `uniqueHistory`. Set to true and App will ignore URL GET parameters when cheking its uniqueness. So the URLs like "page.html" and "page.html?id=3" will be treated as the same. By default, equal to the same App's parameter. Allows to override global App parameter for current View
allowDuplicateUrls	boolean		You may enable this parameter to allow loading of new pages that have same url as currently "active" page in View. By default, equal to the same App's parameter. Allows to override global App parameter for current View
animatePages	boolean		Set to false if you want to disable animated transitions between pages. By default, equal to the same App's parameter. Allows to override global App parameter for current View
preloadPreviousPage	boolean		Enable/disable preloading of previous page when you go deep in navigation. Should be enabled for correct work of "swipe back page" feature. By default, equal to the same App's parameter. Allows to override global App parameter for current View
reloadPages	boolean	false	When enabled, View will always reload currently active page without loading new one
swipeBackPage	boolean		By default, equal to the same App's parameter. Allows to override the same App parameter but for the current View
swipeBackPageThreshold	number		By default, equal to the same App's parameter. Allows to override the same App parameter but for the current View
swipeBackPageActiveArea	number		By default, equal to the same App's parameter. Allows to override the same App parameter but for the current View
swipeBackPageAnimateShadow	boolean		By default, equal to the same App's parameter. Allows to override the same App parameter but for the current View
swipeBackPageAnimateOpacity	boolean		By default, equal to the same App's parameter. Allows to override the same App parameter but for the current View

Events

These events are available only in iOS theme

Event	Description
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

Access To Initialized Instance

If you use automatic initalization to init the View (with init:true prop) and need to use its Methods and Properties (like router) you can access its initialized instance:

by accessing .f7View component's property
if you have passed name property (e.g. "left") you can access it like this.$f7.views.left or this.$f7.leftView
main view (with main="true" prop) is always accessible via this.$f7.views.main or this.$f7.mainView