menu MDUI 文档
color_lens
near_me
开始使用
keyboard_arrow_down
安装 兼容性 JavaScript 工具库 JavaScript 全局方法
layers
样式
keyboard_arrow_down
颜色与主题 字体 网格布局 排版 图标 媒体 辅助类 阴影
widgets
组件
keyboard_arrow_down
涟漪动画效果 按钮 浮动操作按钮 下拉选择 分隔线 可扩展面板 文本框 选择控件 滑块 列表 列表控制 网格列表 Tab 选项卡 工具栏 应用栏 抽屉式导航 底部导航栏 卡片 纸片 工具提示 Snackbar 表格 对话框 菜单 进度指示器
view_carousel
JavaScript 插件
keyboard_arrow_down
Collapse Headroom
local_mall
资源
keyboard_arrow_down
Material 图标

应用栏

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

调用方式

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

色彩

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

相关阅读

Material Design 设计指南：结构 - 应用栏

样式

仅含工具栏

codeplay_arrow
Example
menu MDUI Title
search refresh more_vert 
<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
    <a href="javascript:;" class="mdui-typo-headline">MDUI</a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">refresh</i></a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">more_vert</i></a>
  </div>
</div>

仅含 Tab 选项卡

codeplay_arrow
Example
web shopping videos 
<div class="mdui-appbar">
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
    <a href="#example3-tab2" class="mdui-ripple mdui-ripple-white">shopping</a>
    <a href="#example3-tab3" class="mdui-ripple mdui-ripple-white">videos</a>
  </div>
</div>

含工具栏和 Tab 选项卡

codeplay_arrow
Example
menu Title
search refresh more_vert
web shopping videos 
<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">refresh</i></a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">more_vert</i></a>
  </div>
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">shopping</a>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">videos</a>
  </div>
</div>
codeplay_arrow
Example
menu Title
search refresh more_vert
phone favorite perm_contact_calendar 
<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">refresh</i></a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">more_vert</i></a>
  </div>
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example6-tab1" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">phone</i>
      <label>recents</label>
    </a>
    <a href="#example6-tab2" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">favorite</i>
      <label>favorites</label>
    </a>
    <a href="#example6-tab3" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">perm_contact_calendar</i>
      <label>nearby</label>
    </a>
  </div>
</div>

透明背景

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

codeplay_arrow
Example
menu Title
search refresh more_vert 
<div class="mdui-appbar mdui-shadow-0">
  <div class="mdui-toolbar">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">refresh</i></a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">more_vert</i></a>
  </div>
</div>

固定到页面顶部

在 <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 可以在页面向下滚动时隐藏应用栏，页面向上滚动时显示应用栏。

若元素是动态生成的，则需要调用 mdui.mutation() 进行初始化。

<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 选项卡时，在页面向下滚动时隐藏工具栏，向上滚动时显示工具栏。

若元素是动态生成的，则需要调用 mdui.mutation() 进行初始化。

<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 选项卡时，页面向下滚动时隐藏工具栏，向上滚动时显示工具栏。
arrow_back Previous
工具栏
arrow_forward Next
抽屉式导航
设置文档主题

主题色

主色

强调色