贊助者成為贊助者

工具列 / 標籤列

工具列是螢幕頂端或底部的固定區域，包含導覽元素。

工具列 HTML 版面

工具列版面非常簡單

<div class="toolbar">
  <div class="toolbar-inner">
    <a href="#" class="link">Link 1</a>
    <a href="#" class="link">Link 2</a>
    <a href="#" class="link">Link 3</a>
  </div>
</div>

工具列位置

工具列可以放在頁面頂端或底部。因此，我們通常也需要透過新增類別來指定其位置。

若要將工具列放在頂端，我們需要將 toolbar-top 類別新增至 Toolbar 元素

<!-- Top Toolbar -->
<div class="toolbar toolbar-top">
  <div class="toolbar-inner">
    <a href="#" class="link">Link 1</a>
    <a href="#" class="link">Link 2</a>
    <a href="#" class="link">Link 3</a>
  </div>
</div>

若要將工具列放在底部，我們需要將 toolbar-bottom 類別新增至 Toolbar 元素

<!-- Bottom Toolbar -->
<div class="toolbar toolbar-bottom">
  <div class="toolbar-inner">
    <a href="#" class="link">Link 1</a>
    <a href="#" class="link">Link 2</a>
    <a href="#" class="link">Link 3</a>
  </div>
</div>

我們也可以同時針對 iOS、MD 主題使用不同的位置，方法是使用下列類別：toolbar-top-ios、toolbar-top-md、toolbar-bottom-ios、toolbar-bottom-md。

特定主題樣式

在 iOS 主題中，工具列/標籤列預設在頂端有細邊框。若要停用此邊框，您需要將 no-outline 類別新增至工具列元素

<div class="toolbar no-outline">...</div>

工具列類型

現在讓我們來看看可以在 DOM 中放置工具列/標籤列的位置。有幾條規則可以放置工具列。

靜態工具列

靜態工具列類型可能是最少使用的版面類型。在此情況下，工具列/標籤列只是可捲動頁面內容的一部分

<div class="page">
  <!-- Fixed navbar goes first -->
  <div class="navbar">...</div>

  <!-- Scrollable page content -->
  <div class="page-content">
    ...

    <!-- Static toolbar goes in the end inside of page-content -->
    <div class="toolbar">...</div>
  </div>
</div>

固定工具列

固定工具列也是頁面的一部分，但它始終顯示在螢幕上，與頁面捲動無關。在此情況下，它必須是頁面的直接子項，如果頁面也有固定導覽列，則它必須在導覽列之後

<div class="page">
  <!-- Fixed navbar goes first -->
  <div class="navbar">...</div>
  <!-- Fixed toolbar goes ALWAYS after Navbar -->
  <div class="toolbar toolbar-bottom">...</div>

  <!-- Scrollable page content -->
  <div class="page-content">
    ...
  </div>
</div>

固定工具列/標籤列必須始終是頁面的直接子項，且在導覽列之後（如果此頁面使用固定導覽列）

共用工具列

如果我們只需要一個共用工具列供檢視中的所有頁面使用，則它必須是此檢視的直接子項，且在檢視中的所有頁面之前

<div class="view">
  <!-- View common toolbar -->
  <div class="toolbar toolbar-bottom">...</div>

  <!-- Pages -->
  <div class="page">...</div>
</div>

如果我們只需要一個共用工具列/標籤列供所有檢視使用，則它必須是檢視元素的直接子項，且在所有檢視之前。此類版面主要用於有多個檢視/標籤式應用程式版面，且有工具列

<div class="views tabs">
  <!-- Views common toolbar / tabbar -->
  <div class="toolbar tabbar toolbar-bottom">...</div>

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

共用工具列/標籤列必須始終是檢視/檢視的直接子項，且放在導覽列之後（如果使用相同位置的導覽列）

工具列應用程式方法

我們可以使用下列適用於工具列的應用程式方法

app.toolbar.hide(toolbarEl, animate)隱藏工具列
  • toolbarEl - HTMLElement 或 string（使用 CSS 選擇器）的必要工具列。必要。
  • animate - 布林值 - 是否應以動畫隱藏。預設為 true
app.toolbar.show(toolbarEl, animate)顯示工具列
  • toolbarEl - HTMLElement 或 string（使用 CSS 選擇器）的必要工具列。必要。
  • animate - 布林值 - 是否應以動畫顯示。預設為 true
app.toolbar.setHighlight(tabbarEl)根據活動選項卡設定選項卡連結的醒目提示。這只會在 MD 主題中產生作用
  • tabbarEl - HTMLElement 或 字串 (含 CSS 選擇器) 的必要 tabbar。必要。

工具列應用程式參數

可以使用全域 應用程式參數，透過在 toolbar 參數下傳遞與工具列相關的參數，來控制一些預設的工具列行為

參數類型預設說明
hideOnPageScroll布林值false將在頁面捲動時隱藏工具列/選項卡列
showOnPageScrollEnd布林值true設定為 true 以在捲動到達頁面末端時顯示隱藏的工具列/選項卡列
showOnPageScrollTop布林值true設定為 false，隱藏的工具列/選項卡列將不會在您每次將頁面捲動到頂端時變為可見。它們只會在最頂端的捲動位置，也就是頁面開頭時變為可見

例如

var app = new Framework7({
  toolbar: {
    hideOnPageScroll: true,
  },
});

選項卡列

選項卡列是工具列的特殊情況，但它包含圖示 (或帶標籤的圖示)，而非一般連結，且用於 選項卡。

選項卡列版面

選項卡列版面幾乎與工具列相同，但選項卡列有額外的 tabbar 類別

<div class="toolbar tabbar toolbar-bottom">
  <div class="toolbar-inner">
    <a href="#tab1" class="tab-link tab-link-active">
      <i class="icon demo-icon-1"></i>
    </a>
    <a href="#tab2" class="tab-link">
      <i class="icon demo-icon-2"></i>
    </a>
    ....
  </div>
</div>

預設情況下，所有選項卡列元素 (連結) 都均勻分佈在工具列中，彼此之間有相等的間距。但這裡有關於連結大小的重要注意事項

  • 在窄螢幕 (手機) 上，所有連結的大小都相同，等於 [螢幕寬度] / [連結數]

  • 在寬螢幕 (平板電腦) 上，所有連結都將置中，最小寬度等於 105 像素

帶有圖示的選項卡列

如果您需要使用帶有標籤的選項卡列圖示，我們需要在選項卡列上再加一個「tabbar-icons」類別，並在連結內放置 <span class="tabbar-label">

<div class="toolbar tabbar tabbar-icons toolbar-bottom">
  <div class="toolbar-inner">
    <a href="#tab1" class="tab-link tab-link-active">
      <i class="icon demo-icon-1"></i>
      <span class="tabbar-label">Label 1</span>
    </a>
    <a href="#tab2" class="tab-link">
      <i class="icon demo-icon-2"></i>
      <span class="tabbar-label">Label 2</span>
    </a>
    ...
  </div>
</div>

可捲動選項卡列

當您有許多連結，而且它們都無法顯示時，使用可捲動選項卡列可能會很有用。它允許您滑動/捲動選項卡連結。

我們只需要在選項卡列中新增 tabbar-scrollable 類別，就能讓選項卡列可捲動

<!-- Additional "tabbar-scrollable" class -->
<div class="toolbar tabbar tabbar-scrollable toolbar-bottom">
  <div class="toolbar-inner">
    <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
    <a href="#tab-2" class="tab-link">Tab 2</a>
    <a href="#tab-3" class="tab-link">Tab 3</a>
    ...
    <a href="#tab-12" class="tab-link">Tab 12</a>
  </div>
</div>

使用頁面類別控制工具列/選項卡列

Framework7 允許您使用額外類別，在特定頁面或特定頁面捲動時隱藏/顯示工具列/選項卡列。

如果您想在特定頁面捲動時隱藏工具列/標籤列，請在該頁面的 <div class="page-content"> 元素上使用其他類別

若要在特定頁面上停用此行為，您可以使用下列其他類別

例如

<div class="page">
  <div class="navbar">
    ...
  </div>
  <!-- "hide-toolbar-on-scroll" class to hide Toolbar -->
  <div class="page-content hide-toolbar-on-scroll">
    <div class="block">
      <p>Scroll page down</p>
      ...
    </div>
  </div>
  <div class="toolbar toolbar-bottom">
    <div class="toolbar-inner">
      <a href="#" class="link">Hello</a>
      <a href="#" class="link">World</a>
    </div>
  </div>
</div>

如果您在應用程式的所有頁面/檢視中都有共用的單一工具列/標籤列，則可以在不需要的某些頁面上自動隱藏/顯示工具列/標籤列。

要讓它運作，您只需要將 no-toolbar 類別新增到載入的頁面 (<div class="page no-toolbar">)

<!-- Page has additional "no-toolbar" class -->
<div class="page no-toolbar">
  <div class="page-content">
      ...
  </div>
</div>

工具列事件

工具列會在工具列元素 (<div class="toolbar">) 上觸發下列 DOM 事件，並在應用程式執行個體上觸發應用程式事件

DOM 事件

事件目標說明
toolbar:hide工具列 <div class="toolbar">當工具列變為隱藏時，將觸發事件
toolbar:show工具列 <div class="toolbar">當工具列變為可見時，將觸發事件

應用程式事件

事件參數說明
toolbarHide(el)當工具列變為隱藏時，將觸發事件
toolbarShow(el)當工具列變為可見時，將觸發事件

CSS 變數

以下是相關 CSS 變數 (CSS 自訂屬性) 清單。

請注意，預設情況下不會指定已註解的變數，而其值是它們在此情況下的備用值。

:root {
  /*
  --f7-toolbar-bg-color: var(--f7-bars-bg-color);
  --f7-toolbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  --f7-toolbar-border-color: var(--f7-bars-border-color);
  --f7-toolbar-link-color: var(--f7-bars-link-color);
  --f7-toolbar-text-color: var(--f7-bars-text-color);
  */
  --f7-tabbar-link-active-bg-color: transparent;
  --f7-tabbar-label-text-transform: none;
  --f7-toolbar-hide-show-transition-duration: 400ms;
}
.ios {
  --f7-toolbar-height: 44px;
  --f7-toolbar-font-size: 17px;
  --f7-toolbar-inner-padding-left: 8px;
  --f7-toolbar-inner-padding-right: 8px;
  --f7-toolbar-link-font-weight: 400;
  /*
  --f7-toolbar-link-height: var(--f7-toolbar-height);
  --f7-toolbar-link-line-height: var(--f7-toolbar-height);
  --f7-tabbar-link-active-color: var(--f7-theme-color);
  */
  --f7-tabbar-icons-height: 50px;
  --f7-tabbar-icons-tablet-height: 50px;
  --f7-tabbar-icon-size: 28px;
  --f7-tabbar-link-text-transform: none;
  --f7-tabbar-link-font-weight: 400;
  --f7-tabbar-link-letter-spacing: 0;
  --f7-tabbar-label-font-size: 12px;
  --f7-tabbar-label-tablet-font-size: 14px;
  --f7-tabbar-label-font-weight: 500;
  --f7-tabbar-label-letter-spacing: 0.01;
  --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.4);
}
.ios .dark,
.ios.dark {
  --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
}
.md {
  --f7-toolbar-height: 56px;
  --f7-toolbar-font-size: 14px;
  --f7-toolbar-inner-padding-left: 0px;
  --f7-toolbar-inner-padding-right: 0px;
  /*
  --f7-toolbar-link-height: var(--f7-toolbar-height);
  --f7-toolbar-link-line-height: var(--f7-toolbar-height);
  */
  --f7-tabbar-icons-height: 80px;
  --f7-tabbar-icons-tablet-height: 80px;
  --f7-tabbar-icon-size: 24px;
  --f7-tabbar-link-text-transform: none;
  --f7-tabbar-link-font-weight: 500;
  --f7-tabbar-link-letter-spacing: 0;
  --f7-toolbar-link-font-weight: 500;
  --f7-tabbar-label-font-size: 12px;
  --f7-tabbar-label-tablet-font-size: 12px;
  --f7-tabbar-label-font-weight: 500;
  --f7-tabbar-label-letter-spacing: 0;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-tabbar-link-active-color: var(--f7-md-on-secondary-container);
  --f7-tabbar-link-active-border-color: var(--f7-md-primary);
  --f7-tabbar-link-inactive-color: var(--f7-md-on-surface-variant);
  --f7-tabbar-link-active-icon-bg-color: var(--f7-md-secondary-container);
}

範例

靜態工具列

toolbar-tabbar-static.f7.html
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Static Toolbar</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
        qui,
        alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
        similique!</p>
      <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
        vero
        porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
    </div>
    <div class="toolbar toolbar-bottom">
      <div class="toolbar-inner">
        <a class="link">Link 1</a>
        <a class="link">Link 2</a>
        <a class="link">Link 3</a>
      </div>
    </div>
  </div>
</div>

固定工具列

toolbar-tabbar-fixed.f7.html
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Fixed Toolbar</div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom">
    <div class="toolbar-inner">
      <a class="link">Link 1</a>
      <a class="link">Link 2</a>
      <a class="link">Link 3</a>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
        qui,
        alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
        similique!</p>
      <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
        vero
        porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
        qui,
        alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
        similique!</p>
      <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
        vero
        porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
    </div>
  </div>
</div>

工具列 API

toolbar-tabbar-api.f7.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Toolbar API</div>
      </div>
    </div>
    <div class="toolbar toolbar-bottom">
      <div class="toolbar-inner">
        <a class="link">Link 1</a>
        <a class="link">Link 2</a>
        <a class="link">Link 3</a>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p><a class="button button-fill" @click=${hideToolbar}>Hide Toolbar</a></p>
        <p><a class="button button-fill" @click=${showToolbar}>Show Toolbar</a></p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
          vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
          eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
          qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
          vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
          eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
      </div>
    </div>
  </div>

</template>
<script>
  export default (props, { $on, $f7 }) => {
    let toolbarEl;

    const hideToolbar = () => {
      $f7.toolbar.hide(toolbarEl)
    }

    const showToolbar = () => {
      $f7.toolbar.show(toolbarEl)
    }

    $on('pageInit', (e, page) => {
      toolbarEl = page.$el.find('.toolbar')[0];
    });

    return $render;
  }
</script>

捲動時隱藏

toolbar-tabbar-hide-on-scroll.f7.html
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Hide On Scroll</div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom">
    <div class="toolbar-inner">
      <a class="link">Link 1</a>
      <a class="link">Link 2</a>
      <a class="link">Link 3</a>
    </div>
  </div>
  <div class="page-content hide-toolbar-on-scroll">
    <div class="block">
      <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
        vero
        porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
        qui,
        alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
        similique!</p>
      <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
        vero
        porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
    </div>
  </div>
</div>

選項卡列

toolbar-tabbar-tabbar.f7.html
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Tabbar</div>
    </div>
  </div>
  <div class="toolbar tabbar toolbar-bottom">
    <div class="toolbar-inner"><a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
      <a href="#tab-2" class="tab-link">Tab 2</a>
      <a href="#tab-3" class="tab-link">Tab 3</a>
    </div>
  </div>
  <div class="tabs">
    <div class="page-content tab tab-active" id="tab-1">
      <div class="block">
        <p><b>Tab 1 content</b></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
          qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos
          perspiciatis
          vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.
        </p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
          eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam
          soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius
          aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam
          vel
          reprehenderit!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
          qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos
          perspiciatis
          vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.
        </p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
          eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam
          soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius
          aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam
          vel
          reprehenderit!</p>
      </div>
    </div>
    <div class="page-content tab" id="tab-2">
      <div class="block">
        <p><b>Tab 2 content</b></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
          qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos
          perspiciatis
          vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.
        </p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
          eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam
          soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius
          aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam
          vel
          reprehenderit!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
          qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos
          perspiciatis
          vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.
        </p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
          eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam
          soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius
          aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam
          vel
          reprehenderit!</p>
      </div>
    </div>
    <div class="page-content tab" id="tab-3">
      <div class="block">
        <p><b>Tab 3 content</b></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
          qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos
          perspiciatis
          vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.
        </p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
          eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam
          soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius
          aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam
          vel
          reprehenderit!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
          qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos
          perspiciatis
          vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.
        </p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
          eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam
          soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius
          aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam
          vel
          reprehenderit!</p>
      </div>
    </div>
  </div>
</div>

帶有圖示的選項卡列

toolbar-tabbar-tabbar-icons.f7.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Tabbar With Icons</div>
        <div class="right">
          <a class="link" @click=${togglePosition}>
            <i class="md-only icon material-icons rotate-icon">compare_arrows</i>
            <i class="if-not-md icon f7-icons">arrow_up_arrow_down_circle_fill</i>
          </a>
        </div>
      </div>
    </div>
    <div class="toolbar tabbar-icons toolbar-bottom">
      <div class="toolbar-inner">
        <a href="#tab-1" class="tab-link tab-link-active">
          <i class="icon f7-icons if-not-md">envelope_fill</i>
          <i class="icon material-icons md-only">email</i>
          <span class="tabbar-label">Inbox</span>
        </a>
        <a href="#tab-2" class="tab-link">
          <i class="icon f7-icons if-not-md">today_fill<span class="badge color-red">5</span></i>
          <i class="icon material-icons md-only">today<span class="badge color-red">5</span></i>
          <span class="tabbar-label">Calendar</span>
        </a>
        <a href="#tab-3" class="tab-link">
          <i class="icon f7-icons if-not-md">cloud_upload_fill</i>
          <i class="icon material-icons md-only">file_upload</i>
          <span class="tabbar-label">Upload</span>
        </a>
      </div>
    </div>
    <div class="tabs">
      <div class="page-content tab tab-active" id="tab-1">
        <div class="block">
          <p><b>Tab 1 content</b></p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
            qui,
            alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
            similique!</p>
          <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos
            perspiciatis
            vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.
          </p>
          <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
            eveniet
            ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
          <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam
            soluta,
            possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius
            aliquam.
            Sunt, ad aliquam!</p>
          <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
            consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam
            vel
            reprehenderit!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
            qui,
            alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
            similique!</p>
          <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos
            perspiciatis
            vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.
          </p>
          <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
            eveniet
            ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
          <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam
            soluta,
            possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius
            aliquam.
            Sunt, ad aliquam!</p>
          <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
            consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam
            vel
            reprehenderit!</p>
        </div>
      </div>
      <div class="page-content tab" id="tab-2">
        <div class="block">
          <p><b>Tab 2 content</b></p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
            qui,
            alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
            similique!</p>
          <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos
            perspiciatis
            vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.
          </p>
          <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
            eveniet
            ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
          <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam
            soluta,
            possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius
            aliquam.
            Sunt, ad aliquam!</p>
          <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
            consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam
            vel
            reprehenderit!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
            qui,
            alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
            similique!</p>
          <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos
            perspiciatis
            vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.
          </p>
          <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
            eveniet
            ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
          <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam
            soluta,
            possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius
            aliquam.
            Sunt, ad aliquam!</p>
          <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
            consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam
            vel
            reprehenderit!</p>
        </div>
      </div>
      <div class="page-content tab" id="tab-3">
        <div class="block">
          <p><b>Tab 3 content</b></p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
            qui,
            alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
            similique!</p>
          <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos
            perspiciatis
            vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.
          </p>
          <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
            eveniet
            ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
          <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam
            soluta,
            possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius
            aliquam.
            Sunt, ad aliquam!</p>
          <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
            consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam
            vel
            reprehenderit!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
            qui,
            alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
            similique!</p>
          <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos
            perspiciatis
            vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.
          </p>
          <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
            eveniet
            ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
          <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam
            soluta,
            possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius
            aliquam.
            Sunt, ad aliquam!</p>
          <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
            consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam
            vel
            reprehenderit!</p>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
  .rotate-icon {
    transform: rotate(90deg);
  }
</style>
<script>
  export default (props, { $, $on }) => {
    let $toolbarEl;

    const togglePosition = () => {
      $toolbarEl.toggleClass('toolbar-bottom toolbar-top');
    }

    $on('pageInit', (e, page) => {
      $toolbarEl = page.$el.find('.toolbar');
    });

    return $render;
  }

</script>

可捲動選項卡列

toolbar-tabbar-tabbar-scrollable.f7.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Scrollable Tabbar</div>
      </div>
    </div>
    <div class="toolbar tabbar tabbar-scrollable toolbar-bottom">
      <div class="toolbar-inner">
        ${tabs.map((tab, index) => $h`
        <a href="#tab-${tab}" class="tab-link ${index === 0 ? 'tab-link-active' : ''}">Tab ${tab}</a>
        `)}
      </div>
    </div>
    <div class="tabs">
      ${tabs.map((tab, index) => $h`
      <div id="tab-${tab}" class="page-content tab ${index === 0 ? 'tab-active' : ''}">
        <div class="block">
          <p><b>Tab ${tab} content</b></p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque corrupti, quos asperiores unde
            aspernatur
            illum odio, eveniet. Fugiat magnam perspiciatis ex dignissimos, rerum modi ea nesciunt praesentium iusto
            optio rem?</p>
          <p>Illo debitis et recusandae, ipsum nisi nostrum vero delectus quasi. Quasi, consequatur! Corrupti,
            explicabo
            maxime incidunt fugit sint dicta saepe officiis sed expedita, minima porro! Ipsa dolores quia, delectus
            labore!</p>
          <p>At similique minima placeat magni molestias sunt deleniti repudiandae voluptatibus magnam quam esse
            reprehenderit dolor enim qui sed alias, laboriosam quaerat laborum iure repellat praesentium pariatur
            dolorum possimus veniam! Consectetur.</p>
          <p>Sunt, sed, magnam! Qui, suscipit. Beatae cum ullam necessitatibus eligendi, culpa rem excepturi
            consequatur
            quidem totam eum voluptates nihil, enim pariatur incidunt corporis sed facere magni earum tenetur rerum
            ea.
          </p>
          <p>Veniam nulla quis molestias voluptatem inventore consectetur iusto voluptatibus perferendis quisquam,
            cupiditate voluptates, tenetur vero magnam nisi animi praesentium atque adipisci optio quod aliquid vel
            delectus ad? Dicta deleniti, recusandae.</p>
        </div>
      </div>
      `)}
    </div>
  </div>
</template>
<script>
  export default () => {
    const tabs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    return $render;
  }
</script>
改善此文件
在此頁面上