Views Vue Component

Views is the wrapper container for all visual views that stays visible most of the time (not in modals, panels). Let's say that views is a main wrapper for "body" of your app. Only one "Views" element is allowed

Usage examples

<f7-views>
  ...
</f7-views>

Renders to:

<div class="views">
  ...
</div>

Views As Tabs

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

Renders to:

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

With fixed navbar for all nested views

<f7-views navbar-fixed>
  ...
</f7-views>

Renders to:

<div class="views navbar-fixed">
  ...
</div>

Properties

Prop	Type	Description
tabs	boolean	Uses Views as Tabs
theme	string	Views theme color. One of default colors
layout	string	Views 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