Example
<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>
Example
<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>
Example
<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>
Example
<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
取消应用栏的阴影。
Example
<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 选项卡时,页面向下滚动时隐藏工具栏,向上滚动时显示工具栏。 |