Framework7学习笔记之 工具栏

Posted 2020-10-24 ygj0930

 

一：工具栏布局

    工具栏布局十分简单：所有工具栏元素（链接）沿着工具栏等距分布。

<div class="toolbar">
    <div class="toolbar-inner">
        <a href="#" class="link">导航元素 1</a>
        <a href="#" class="link">导航元素 2</a>
        <a href="#" class="link">导航元素 3</a>
        ......
    </div>
</div>

 

二：自动隐藏工具栏

    在穿透布局类型中，view定义的工具栏会穿透到页面内。

    如果页面中不需要工具栏，则可以：在page中通过 no-toolbar 类来隐藏工具栏；定义一个空的工具栏元素。

    1）为page添加 no-toolbar

<div data-page="about" class="page no-toolbar">
  <div class="page-content">
    <div class="content-block">
      ...
    </div>
  </div>
</div>

   2）在文件底部定义一个空的工具栏

<div class="toolbar">
    <div class="toolbar-inner">
    </div>
</div>

 

三：带图标的工具栏(标签栏)

    我们可以为工具栏增加一个tabbar类，转变为标签栏。标签栏可以使用图标作为导航元素，更加生动。

    1:定义标签栏

<div class="toolbar tabbar"> //增加tabbar类
    <div class="toolbar-inner">
        <a href="#tab1" class="tab-link active">
            <i class="icon 图标"></i> //包含图标作为导航元素
        </a>
        <a href="#tab2" class="tab-link">
            <i class="icon 图标"></i>
        </a>
        <a href="#tab3" class="tab-link">
            <i class="icon 图标"></i>
        </a>
    </div>
</div>

    2:为图标添加角标（类似于 消息数量提示 的效果）

<a href="#tab2" class="tab-link">
   <i class="icon 图标">
      <span class="badge bg-red">角标内容</span>
   </i>
</a>

    3:图标+文字 的标签栏

<a href="#tab1" class="tab-link active">//一个导航元素
    <i class="icon 图标"></I> //导航元素的图标
    <span class="tabbar-label">文字</span> //导航元素的文字
</a>

    

四：滑动时隐藏工具栏

如果你只想在某些特定页面打开滑动隐藏的功能，你可以通过添加额外的 <div class="page-content"> 类来实现：

• hide-bars-on-scroll - 页面滚动时自动隐藏工具栏和导航栏

• hide-navbar-on-scroll - 页面滚动时自动隐藏导航栏

• hide-toolbar-on-scroll - 页面滚动时，自动隐藏工具栏

• hide-tabbar-on-scroll - 页面滚动时，自动隐藏带图标的工具栏（tabbar)

可以通过添加以下的样式禁用滚动隐藏工具栏

• keep-bars-on-scroll - 页面滚动时不隐藏工具栏和导航栏

• keep-navbar-on-scroll - 页面滚动时不隐藏导航栏

• keep-toolbar-on-scroll - 页面滚动时不隐藏工具栏

• keep-tabbar-on-scroll - 页面滚动时不隐藏带图标的工具栏（tabbar)

   

 五：特别属性

    1:Material Design风格工具栏

<div class="toolbar toolbar-bottom-md">
    <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>

    2:Material Design风格的可滚动标签栏条（很多歌导航元素，需要使用滚动来选择）

<div class="toolbar tabbar tabbar-scrollable">

    3:隐藏ios工具栏的边框效果

<div class="toolbar no-hairline">...</div>

    4:隐藏Material Design工具栏的阴影效果

<div class="toolbar no-shadow">...</div>