View React 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 React component represents Framework7's View component.

Usage examples

Minimal layout

<View main>
  ...
</View>

Renders to:

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

As a Tab

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

Renders to:

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

Empty

<View main navbarThrough></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

<View dynamicNavbar={true} url={/home/} animatePages={false}>...</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
navbarFixed boolean Enable when you use fixed navbar layout
navbarThrough boolean Enable when you use through navbar layout
toolbarFixed boolean Enable when you use fixed toolbar layout
toolbarThrough boolean Enable when you use through toolbar layout
tabbarFixed boolean Enable when you use fixed tabbar layout
tabbarThrough boolean Enable when you use through tabbar layout
tabbarLabelsFixed boolean Enable when you use fixed tabbar layout
tabbarLabelsThrough 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

Event Properties

These events are available only in iOS theme

Event Description
onSwipebackMove Event will be triggered during swipe back move
onSwipebackBeforechange Event will be triggered right before swipe back animation to previous page when you release it
onSwipebackAfterchange Event will be triggered after swipe back animation to previous page when you release it
onSwipebackBeforereset Event will be triggered right before swipe back animation to current page when you release it
onSwipebackAfterreset Event will be triggered after swipe back animation to current page when you release it