Toolbar / Tabbar - 图1

Toolbar Vue Component

Toolbar is a fixed (with Fixed and Through layout types) area at the bottom of a screen that contains navigation elements. Toolbar does not have any parts, just plain links inside

Toolbar Vue component represents Toolbar component.

Toolbar Components

There are following components included:

  • f7-toolbar

Toolbar Properties

PropTypeDefaultDescription
<f7-toolbar> properties
innerbooleantrueWhen enabled (by default), it will put all the content within internal toolbar-inner element. Disable it only in case you want to put totally custom layout inside
positionstringToolbar position, can be top or bottom
topbooleanTop positioned toolbar. Shortening for position=”top”
top-iosbooleanTop positioned toolbar only for iOS theme
top-mdbooleanTop positioned toolbar only for MD theme
top-aurorabooleanTop positioned toolbar only for Aurora theme
bottombooleanBottom positioned toolbar. Shortening for position=”bottom”
bottom-iosbooleanBottom positioned toolbar only for iOS theme
bottom-mdbooleanBottom positioned toolbar only for MD theme
bottom-aurorabooleanBottom positioned toolbar only for Aurora theme
tabbarbooleanfalseDefines whether the Toolbar is also a Tabbar or not
labelsbooleanfalseEnables Tabbar with labels (affects only when tabbar: true)
scrollablebooleanfalseEnables scrollable Tabbar (affects only when tabbar: true)
no-shadowbooleanDisable shadow rendering for Material theme
no-hairlinebooleanfalseDisable toolbar/tabbar top thin border (hairline) for iOS theme
hiddenbooleanfalseMakes toolbar hidden

Toolbar Methods

<f7-toolbar> methods
.hide(animate)Hide toolbar
.show(animate)Show toolbar

Toolbar Events

EventDescription
<f7-toolbar> events
toolbar:hideEvent will be triggered when Toolbar becomes hidden
toolbar:showEvent will be triggered when Toolbar becomes visible

Toolbar Slots

Toolbar Vue component (<f7-toolbar>) has additional slots for custom elements:

  • default - element will be inserted as a child of <div class="toolbar-inner"> element
  • before-inner - element will be inserted right before <div class="toolbar-inner"> element
  • after-inner - element will be inserted right after <div class="toolbar-inner"> element
  1. <f7-toolbar>
  2.   <div slot="before-inner">Before Inner</div>
  3.   <div slot="after-inner">After Inner</div>
  4.   <!-- Goes to default slot: -->
  5.   <f7-link>Left Link</f7-link>
  6.   <f7-link>Right Link</f7-link>
  7. </f7-toolbar>
  9. <!-- Renders to: -->
  11. <div class="toolbar">
  12.   <div>Before Inner</div>
  13.   <div class="toolbar-inner">
  14.     <a href="#" class="link">Left Link</a>
  15.     <a href="#" class="link">Right Link</a>
  16.   </div>
  17.   <div>After Inner</div>
  18. </div>

Examples

Toolbar

  1. <template>
  2.   <f7-page>
  3.     <f7-navbar title="Toolbar" back-link="Back"></f7-navbar>
  4.     <f7-toolbar :position="isBottom ? 'bottom' : 'top'">
  5.       <f7-link>Left Link</f7-link>
  6.       <f7-link>Right Link</f7-link>
  7.     </f7-toolbar>
  8.     <f7-block-title>Toolbar Position</f7-block-title>
  9.     <f7-block>
  10.       <p>Toolbar supports both top and bottom positions. Click the following button to change its position.</p>
  11.       <p>
  12.         <f7-button raised @click="isBottom = !isBottom">Toggle Toolbar Position</f7-button>
  13.       </p>
  14.     </f7-block>
  15.     <f7-block>
  16.       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae...</p>
  17.     </f7-block>
  18.   </f7-page>
  19. </template>
  20. <script>
  21.   export default {
  22.     data() {
  23.       return {
  24.         isBottom: true,
  25.       };
  26.     }
  27.   }
  28. </script>

Tabbar

  1. <template>
  2.   <f7-page :page-content="false">
  3.     <f7-navbar title="Tabbar" back-link="Back">
  4.       <f7-nav-right>
  5.         <f7-link icon-ios="f7:arrow_up_arrow_down_circle_fill" icon-aurora="f7:arrow_up_arrow_down_circle_fill" icon-md="material:compare_arrows" @click="isBottom = !isBottom"></f7-link>
  6.       </f7-nav-right>
  7.     </f7-navbar>
  8.     <f7-toolbar tabbar :position="isBottom ? 'bottom' : 'top'">
  9.       <f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
  10.       <f7-link tab-link="#tab-2">Tab 2</f7-link>
  11.       <f7-link tab-link="#tab-3">Tab 3</f7-link>
  12.     </f7-toolbar>
  14.     <f7-tabs>
  15.       <f7-tab id="tab-1" class="page-content" tab-active>
  16.         <f7-block>
  17.           <p>Tab 1 content</p>
  18.           ...
  19.         </f7-block>
  20.       </f7-tab>
  21.       <f7-tab id="tab-2" class="page-content">
  22.         <f7-block>
  23.           <p>Tab 2 content</p>
  24.           ...
  25.         </f7-block>
  26.       </f7-tab>
  27.       <f7-tab id="tab-3" class="page-content">
  28.         <f7-block>
  29.           <p>Tab 3 content</p>
  30.           ...
  31.         </f7-block>
  32.       </f7-tab>
  33.     </f7-tabs>
  34.   </f7-page>
  35. </template>
  36. <script>
  37.   export default {
  38.     data() {
  39.       return {
  40.         isBottom: true,
  41.       };
  42.     }
  43.   }
  44. </script>

Tabbar Labels

  1. <template>
  2.   <f7-page :page-content="false">
  3.     <f7-navbar title="Tabbar Labels" back-link="Back">
  4.       <f7-nav-right>
  5.         <f7-link icon-ios="f7:arrow_up_arrow_down_circle_fill" icon-aurora="f7:arrow_up_arrow_down_circle_fill" icon-md="material:compare_arrows" @click="isBottom = !isBottom"></f7-link>
  6.       </f7-nav-right>
  7.     </f7-navbar>
  8.     <f7-toolbar tabbar labels :position="isBottom ? 'bottom' : 'top'">
  9.       <f7-link tab-link="#tab-1" tab-link-active text="Tab 1" icon-ios="f7:envelope_fill" icon-aurora="f7:envelope_fill" icon-md="material:email"></f7-link>
  10.       <f7-link tab-link="#tab-2" text="Tab 2" icon-ios="f7:calendar_fill" icon-aurora="f7:calendar_fill" icon-md="material:today"></f7-link>
  11.       <f7-link tab-link="#tab-3" text="Tab 3" icon-ios="f7:cloud_upload_fill" icon-aurora="f7:cloud_upload_fill" icon-md="material:file_upload"></f7-link>
  12.     </f7-toolbar>
  14.     <f7-tabs>
  15.       <f7-tab id="tab-1" class="page-content" tab-active>
  16.         <f7-block>
  17.           <p>Tab 1 content</p>
  18.           ...
  19.         </f7-block>
  20.       </f7-tab>
  21.       <f7-tab id="tab-2" class="page-content">
  22.         <f7-block>
  23.           <p>Tab 2 content</p>
  24.           ...
  25.         </f7-block>
  26.       </f7-tab>
  27.       <f7-tab id="tab-3" class="page-content">
  28.         <f7-block>
  29.           <p>Tab 3 content</p>
  30.           ...
  31.         </f7-block>
  32.       </f7-tab>
  33.     </f7-tabs>
  34.   </f7-page>
  35. </template>
  36. <script>
  37.   export default {
  38.     data() {
  39.       return {
  40.         isBottom: true,
  41.       };
  42.     }
  43.   }
  44. </script>

Tabbar Scrollable

  1. <template>
  2.   <f7-page :page-content="false">
  3.     <f7-navbar title="Tabbar Scrollable" back-link="Back">
  4.       <f7-nav-right>
  5.         <f7-link icon-ios="f7:arrow_up_arrow_down_circle_fill" icon-aurora="f7:arrow_up_arrow_down_circle_fill" icon-md="material:compare_arrows" @click="isBottom = !isBottom"></f7-link>
  6.       </f7-nav-right>
  7.     </f7-navbar>
  8.     <f7-toolbar tabbar scrollable :position="isBottom ? 'bottom' : 'top'">
  9.       <f7-link
  10.         v-for="(tab, index) in tabs"
  11.         :key="tab"
  12.         :tab-link="`#tab-${tab}`"
  13.         :tab-link-active="index === 0"
  14.         >Tab {{tab}}</f7-link>
  15.     </f7-toolbar>
  16.     <f7-tabs>
  17.       <f7-tab
  18.         v-for="(tab, index) in tabs"
  19.         :key="tab"
  20.         :id="`tab-${tab}`"
  21.         class="page-content"
  22.         :tab-active="index === 0"
  23.       >
  24.         <f7-block>
  25.           <p><b>Tab {{tab}} content</b></p>
  26.           ...
  27.         </f7-block>
  28.       </f7-tab>
  29.     </f7-tabs>
  30.   </f7-page>
  31. </template>
  32. <script>
  33.   export default {
  34.     data() {
  35.       return {
  36.         tabs: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  37.         isBottom: true,
  38.       };
  39.     }
  40.   }
  41. </script>

Hide Toolbar On Scroll

  1. <template>
  2.   <f7-page hide-toolbar-on-scroll>
  3.     <f7-navbar title="Hide Toolbar On Scroll" back-link="Back"></f7-navbar>
  4.     <f7-toolbar bottom-md>
  5.       <f7-link>Left Link</f7-link>
  6.       <f7-link>Right Link</f7-link>
  7.     </f7-toolbar>
  8.     <f7-block strong>
  9.       <p>Toolbar will be hidden if you scroll bottom</p>
  10.     </f7-block>
  11.     <f7-block>
  12.       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos maxime incidunt id ab culpa ipsa omnis eos, vel excepturi officiis neque illum perferendis dolorum magnam rerum natus dolore nulla ex.</p>
  13.       ...
  14.     </f7-block>
  15.   </f7-page>
  16. </template>

← Toggle

Treeview →