语言: ENCN

工具栏

工具栏是位于屏幕底端的固定(在固定和穿透布局类型中)区域,它包含导航元素。

工具栏不包含任何其他部分,内部只含有普通文本。

工具栏布局

工具栏布局非常简单:

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

默认情况下,所有的工具栏元素(链接)沿着工具栏等距分布 - 它们之间的距离相等。

相关视图方法

如果我们已经初始化视图我们可以使用工具栏的如下方法:

myApp.hideToolbar(toolbar) Hide specified toolbar.
toolbar - HTMLElement or string (with CSS Selector) of required toolbar. Required.
myApp.showToolbar(toolbar) Show specified toolbar.
toolbar - HTMLElement or string (with CSS Selector) of required toolbar. Required.
view.hideToolbar() 隐藏该视图中的工具栏
view.showToolbar() 显示该视图中的工具栏

下面为示例:

var myApp = new Framework7();
 
var $ = Framework7.$;
 
var mainView = myApp.addView('.view-main');
 
$('.hide-toolbar').on('click', function () {
    mainView.hideToolbar();
});
 
$('.show-toolbar').on('click', function () {
    mainView.showToolbar();
});

自动隐藏工具栏

Framework7允许你在不需要工具栏而且通过Ajax载入的页面上,自动隐藏工具栏。它只在你使用穿透类型的布局时才有用。

为了实现这点,你要做的是添加"no-toolbar"类到载入的页面中(<div class="page no-toolbar">),然后在那里放置一个空的导航栏:

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

Bottom Toolbar

Bottom Toolbar is supported only in Material Theme. In iOS Theme it is on the bottom by default

In Material Theme Toolbar/Tabbar is usually on top of the app right below the Navbar. But if you really need to Toolbar on bottom you can do it by just using addional "toolbar-bottom" class:

Framework7 allows you to hide/show Toolbar automatically for some Ajax loaded pages where you may not need Toolbar. It is useful only when you use through-type layout.

<div data-page="home" class="page toolbar-fixed navbar-fixed">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="center">Bottom Toolbar</div>
    </div>
  </div>
 
  <!-- Toolbar has additional "toolbar-bottom" class -->
  <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>
  <div class="page-content">
    ...
  </div>
</div>