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

标签栏

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

标签栏布局

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

  1. <div class="toolbar tabbar">
  2.     <div class="toolbar-inner">
  3.         <a href="#tab1" class="tab-link active">
  4.             <i class="icon demo-icon-1"></i>
  5.         </a>
  6.         <a href="#tab2" class="tab-link">
  7.             <i class="icon demo-icon-2"></i>
  8.         </a>
  9.         <a href="#tab3" class="tab-link">
  10.             <i class="icon demo-icon-3"></i>
  11.         </a>
  12.         <a href="#tab4" class="tab-link">
  13.             <i class="icon demo-icon-4"></i>
  14.         </a>
  15.     </div>
  16. </div>

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

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

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

实例预览

向图标添加徽章

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

  1. <div class="toolbar tabbar">
  2.     <div class="toolbar-inner">
  3.         <a href="#tab1" class="tab-link active">
  4.             <i class="icon demo-icon-1"></i>
  5.         </a>
  6.         <a href="#tab2" class="tab-link">
  7.             <i class="icon demo-icon-2">
  8.                 <span class="badge bg-red">5</span>
  9.             </i>
  10.         </a>
  11.         <a href="#tab3" class="tab-link">
  12.             <i class="icon demo-icon-3"></i>
  13.         </a>
  14.         <a href="#tab4" class="tab-link">
  15.             <i class="icon demo-icon-4">
  16.                 <span class="badge bg-green">15</span>
  17.             </i>
  18.         </a>
  19.     </div>
  20. </div>

实例预览

带有文案的标签栏

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

  1. <div class="toolbar tabbar tabbar-labels">
  2.     <div class="toolbar-inner">
  3.         <a href="#tab1" class="tab-link active">
  4.             <i class="icon demo-icon-1"></i>
  5.             <span class="tabbar-label">Label 1</span>
  6.         </a>
  7.         <a href="#tab2" class="tab-link">
  8.             <i class="icon demo-icon-2">
  9.                 <span class="badge bg-red">5</span>
  10.             </i>
  11.             <span class="tabbar-label">Label 2</span>
  12.         </a>
  13.         <a href="#tab3" class="tab-link">
  14.             <i class="icon demo-icon-3"></i>
  15.             <span class="tabbar-label">Label 3</span>
  16.         </a>
  17.         <a href="#tab4" class="tab-link">
  18.             <i class="icon demo-icon-4"></i>
  19.             <span class="tabbar-label">Label 4</span>
  20.         </a>
  21.     </div>
  22. </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">):

  1. <!-- Page has additional "no-tabbar" class -->
  2. <div data-page="about" class="page no-tabbar">
  3.   <div class="page-content">
  4.     <div class="content-block">
  5.       <p><a href="#" class="back button">Go Back</a></p>
  6.       ...
  7.     </div>
  8.   </div>
  9. </div>