首页 » Framework7 » Framework7 导航栏
网站地图

标签栏

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

标签栏布局

标签栏和工具栏基本一致，但是它有额外的"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"。

相关的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>