View Svelte Component

View Svelte 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 Svelte component represents Framework7’s View component.

View Components

There are following components included:

View - single View-router component
Views - wrapper element for multiple views used as Tabs

View Properties

Prop	Type	Default	Description
<View> properties
init	boolean	true	Initializes View automatically
tab	boolean		Uses View as Tab
tabActive	boolean		Defines View-Tab as currently active Tab
View Svelte component also accepts all View Parameters. All of them can be passed via separate props on `<View>` component
<Views> properties
tabs	boolean		Uses Views as Tabs wrapper container

View Events

Swipe-back related events are available only in iOS theme.

Event	Description
viewInit	Event will be triggered on View initialization
viewResize	Event will be triggered on Master Detail resize (when `masterDetailResizable` enabled)
swipebackMove	Event will be triggered during swipe back move
swipeBackBeforeChange	Event will be triggered right before swipe back animation to previous page when you release it
swipeBackAfterChange	Event will be triggered after swipe back animation to previous page when you release it
swipeBackBeforeReset	Event will be triggered right before swipe back animation to current page when you release it
swipeBackAfterReset	Event will be triggered after swipe back animation to current page when you release it
tabShow	Event will be triggered when View-Tab becomes visible/active
tabHide	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:

by calling .instance() component’s method
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

<View main>
  ...
</View>
<!-- Renders to: -->
<div class="view view-main">
  ...
</div>

Views As Tabs

<App>
  ...
  <Views tabs>
    <View id="tab-1" main tab tabActive>...</View>
    <View id="tab-2" tab>...</View>
  </Views>
  ...
</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

<View
  url="/home/"
  animate={false}
  iosDynamicNavbar={false}
  pushState={true}
>
  ...
</View>

← Treeview

Virtual List →