语言: 英文中文

标签栏

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

标签栏布局

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