应用栏

2018-05-26 00:06 更新

应用栏通常位于页面顶部,可以包含工具栏、Tab 选项卡等组件。一个页面只能有一个应用栏。

调用方式

应用栏组件使用纯 CSS 编写,只需编写 HTML 代码即可生效。

色彩

应用栏不含背景色。可以为应用栏的子元素(工具栏、Tab 选项卡等)设置背景色。


相关资料

Material Design 应用栏结构设计规范


样式

仅含工具栏

www.mdui.org - 应用栏 - 仅含工具栏

在线运行


仅含 Tab 选项卡

www.mdui.org - 应用栏 - 仅含 Tab 选项卡

在线运行


含工具栏和 Tab 选项卡

www.mdui.org - 应用栏 - 含工具栏和 Tab 选项卡

在线运行


www.mdui.org - 应用栏 - 含工具栏和带图标的 Tab 选项卡

在线运行


透明背景

需要添加类 .mdui-shadow-0 取消应用栏的阴影。

www.mdui.org - 应用栏 - 透明背景

在线运行


固定到页面顶部

在 <div class="mdui-appbar"></div> 上添加类 .mdui-appbar-fixed 可以将应用栏固定在页面顶部,不随滚动条滚动。

为了使应用栏不覆盖页面内容,需要在 body 上添加类来为 body 添加 padding-top:

  • .mdui-appbar-with-toolbar:应用栏中含工具栏时需要添加该类。
  • .mdui-appbar-with-tab:应用栏中含 Tab 选项卡时需要添加该类。
  • .mdui-appbar-with-tab-larger:应用栏中含同时又图标和文本的 Tab 选项卡时需要添加该类。

如果应用栏中有除了工具栏和 Tab 选项卡外的其他元素,需要你自己为 body 添加适当的 padding-top。

运行示例1  运行示例2  运行示例3


自动隐藏应用栏

在 <div class="mdui-appbar"></div> 上添加类 .mdui-appbar-scroll-hide 可以在页面向下滚动时隐藏应用栏,页面向上滚动时显示应用栏。

<body class="mdui-appbar-with-toolbar">
  <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-hide">
    <div class="mdui-toolbar">
      ......
    </div>  
  </div>
</body>

在线运行


自动隐藏应用栏中的工具栏

在 <div class="mdui-appbar"></div> 上添加类 .mdui-appbar-scroll-toolbar-hide,在应用栏中同时含有工具栏和 Tab 选项卡时,在页面向下滚动时隐藏工具栏,向上滚动时显示工具栏。

<body class="mdui-appbar-with-toolbar mdui-appbar-with-tab">
  <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
    <div class="mdui-toolbar">
      ......
    </div>
    <div class="mdui-tab">
      ......     
    </div>
  </div>
</body>

在线运行


CSS 类名列表

 类名 效果
 .mdui-appbar 定义一个应用栏。
 .mdui-appbar-fixed 使应用栏固定到页面顶部。
 .mdui-appbar-with-toolbar 应用栏中含工具栏时需要在 body 上添加该类
 .mdui-appbar-with-tab 应用栏中含 Tab 选项卡时需要在 body 上添加该类
 .mdui-appbar-with-tab-larger 应用栏中含同时又图标和文本的 Tab 选项卡时需要在 body 上添加该类
 .mdui-appbar-scroll-hide 在页面向下滚动时隐藏应用栏,向上滚动时显示应用栏。
 .mdui-appbar-scroll-toolbar-hide 在应用栏中同时含有工具栏和 Tab 选项卡时,页面向下滚动时隐藏工具栏,向上滚动时显示工具栏。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号