赞助商成为赞助商

工具栏 / 标签栏

工具栏是屏幕顶部或底部的固定区域，其中包含导航元素。

工具栏 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 元素添加 toolbar-top 类

<!-- 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 元素添加 toolbar-bottom 类

<!-- 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 主题中，默认情况下，Toolbar/Tabbar 的顶部有一条细边框。要禁用此边框，需要向工具栏元素添加 no-outline 类

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

工具栏类型

现在我们来了解一下在 DOM 中放置 Toolbar/Tabbar 的位置。有几条规则可用于放置工具栏。

静态工具栏

静态工具栏类型可能是最少使用的布局类型。在此情况下，Toolbar/Tabbar 只是可滚动页面内容的一部分

<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>

固定的 Toolbar/Tabbar 始终必须是页面和导航栏的直接子元素（如果此页面使用固定的导航栏）

通用工具栏

如果我们只需要一个通用的工具栏用于视图中的所有页面，则它必须是该视图的直接子元素，并位于视图中的所有页面之前

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

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

如果我们只需要一个通用的工具栏/标签栏用于所有视图，则它必须是 Views 元素的直接子元素，并位于所有视图之前。此种布局通常用于具有工具栏的多视图/标签式应用布局

<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>

通用的 Toolbar/Tabbar 始终必须是 Views/View 的直接子元素，并置于导航栏之后（如果使用同位置的导航栏）

工具栏应用方法

我们可以使用工具栏可用的以下应用方法

app.toolbar.hide(toolbarEl, animate)隐藏工具栏
  • toolbarEl - 所需工具栏的 HTMLElement 或 string（带 CSS 选择器）。必需。
  • animate - Boolean - 是否应使用动画将其隐藏。默认值为 true
app.toolbar.show(toolbarEl, animate)显示工具栏
  • toolbarEl - 所需工具栏的 HTMLElement 或 string（带 CSS 选择器）。必需。
  • animate - Boolean - 是否应使用动画显示它。默认值为 true
app.toolbar.setHighlight(tabbarEl)根据活动标签链接，在标签链接上设置高亮显示。这仅在 MD 主题中起效
  • tabbarEl - HTMLElement 或 string （使用 CSS 选择器）来指定所需的 tabbar。必填。

工具栏应用参数

可以通过在 toolbar 参数下传递与工具栏相关的参数，使用全局 应用参数 来控制某些默认的工具栏行为

参数类型默认值说明
hideOnPageScrollbooleanfalse页面滚动时将会隐藏工具栏/标签页栏
showOnPageScrollEndbooleantrue设置为 true 时，在滚动到底页面时，显示隐藏的工具栏/标签页栏
showOnPageScrollTopbooleantrue设置为 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>

默认情况下，所有标签页栏元素（链接）在工具栏上等间距排列 - 它们彼此之间的间距相等。但是此处对链接大小有一个重要说明

  • 在较窄的屏幕（手机）上，所有链接将具有相等的大小，等于 [屏幕宽度] / [链接数]

  • 在较宽的屏幕（平板电脑）上，所有链接都将居中，最小宽度等于 105px

带图标的标签页栏

如果您需要使用带有标签的标签页栏图标，我们还需要在标签页栏上再添加一个“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>
改进本说明文档
在本页中