语言: ENCN

标签栏

标签栏是一种特殊情况的工具栏,它包含图标(或者是带有文案的图标),而不是普通的文本,并且和标签页一起使用。

标签栏布局

标签栏和工具栏基本一致,但是它有额外的"tabbar"类:

<div class="toolbar tabbar">
    <div class="toolbar-inner">
        <a href="#tab1" class="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>
        <a href="#tab3" class="tab-link">
            <i class="icon demo-icon-3"></i>
        </a>
        <a href="#tab4" class="tab-link">
            <i class="icon demo-icon-4"></i>
        </a>
    </div>
</div>

默认情况下,所有的工具栏元素(链接)沿着工具栏等距分布 - 它们之间的距离相等。这里有一些关于链接尺寸的注意事项:

  • 在iPhone上所有的链接尺寸等于[screen width] / [number of links]

  • 在iPad上所有链接会被居中,最小宽度为105px

向图标添加角标

如果你需要向标签栏图标添加徽章,只需在图标内部放入<span class="badge">

<div class="toolbar tabbar">
    <div class="toolbar-inner">
        <a href="#tab1" class="tab-link active">
            <i class="icon demo-icon-1"></i>
        </a>
        <a href="#tab2" class="tab-link">
            <i class="icon demo-icon-2">
                <span class="badge bg-red">5</span>
            </i>
        </a>
        <a href="#tab3" class="tab-link">
            <i class="icon demo-icon-3"></i>
        </a>
        <a href="#tab4" class="tab-link">
            <i class="icon demo-icon-4">
                <span class="badge bg-green">15</span>
            </i>
        </a>
    </div>
</div>

带有文案的标签栏

如果你需要使用带有文案的标签栏,需要在标签栏上再加一个"tabbar-labels"类,然后把<span class="tabbar-label">放到链接里:

<div class="toolbar tabbar tabbar-labels">
    <div class="toolbar-inner">
        <a href="#tab1" class="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">
                <span class="badge bg-red">5</span>
            </i>
            <span class="tabbar-label">Label 2</span>
        </a>
        <a href="#tab3" class="tab-link">
            <i class="icon demo-icon-3"></i>
            <span class="tabbar-label">Label 3</span>
        </a>
        <a href="#tab4" class="tab-link">
            <i class="icon demo-icon-4"></i>
            <span class="tabbar-label">Label 4</span>
        </a>
    </div>
</div>

注意,带有文案的标签栏在不同设备上会有更大的高度而不是44px:在iPhone上是50px,在iPad上是55px

因为这些高度的改变,你需要在 固定和穿透布局 中使用 "tabbar-labels-fixed" 或者 "tabbar-labels-through"。

可滚动的标签栏

Scrollable Tab Bar is available only for Material Theme

When you have a lot of links and they all don't fit into view, then it could be useful to use scrollable Tab Bar. It allows to swipe/scroll through tab links.

All we need to make Tab Bar scrollable is just to add additional "tabbar-scrollable" class to Tab Bar:

<div data-page="home" class="page toolbar-fixed navbar-fixed">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="center">Scrollable Tab Bar</div>
    </div>
  </div>
  <!-- Additional "tabbar-scrollable" class -->
  <div class="toolbar tabbar tabbar-scrollable">
    <div class="toolbar-inner">
      <a href="#tab-1" class="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-4" class="tab-link">Tab 4</a>
      <a href="#tab-5" class="tab-link">Tab 5</a>
      <a href="#tab-6" class="tab-link">Tab 6</a>
      <a href="#tab-7" class="tab-link">Tab 7</a>
      <a href="#tab-8" class="tab-link">Tab 8</a>
      <a href="#tab-9" class="tab-link">Tab 9</a>
      <a href="#tab-10" class="tab-link">Tab 10</a>
      <a href="#tab-11" class="tab-link">Tab 11</a>
      <a href="#tab-12" class="tab-link">Tab 12</a>
    </div>
  </div>
  ...
</div>

相关的App方法

myApp.hideToolbar(toolbar) Hide specified tab bar.
toolbar - HTMLElement or string (with CSS Selector) of required tab bar. Required.
myApp.showToolbar(toolbar) Show specified tab bar.
toolbar - HTMLElement or string (with CSS Selector) of required tab bar. Required.

自动隐藏工具栏/导航栏

Framework7 允许你在ajax加载的页面自动隐藏工具栏/导航栏。只有在穿透布局的时候才可以使用。

你唯一需要做的就是在需要加载的页面上加一个类 "no-tabbar"(<div class="page no-tabbar">):

<!-- Page has additional "no-tabbar" class -->
<div data-page="about" class="page no-tabbar">
  <div class="page-content">
    <div class="content-block">
      <p><a href="#" class="back button">Go Back</a></p>
      ...
    </div>
  </div>
</div>