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.

    View Components

    There are following components included:

    • View / F7View - single View-router component
    • Views / F7Views - 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 React 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
    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 accessing .f7View component's property
    • if you have passed name property (e.g. "left") you can access it like this.$f7.views.left
    • main view (with main={true} prop) is always accessible via this.$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>