样式
基本样式
下面的例子同时显示图标和文本,通常在只有 3 个导航项时使用。
含类 .mdui-bottom-nav-active
的导航项将处于默认激活状态。
Example
<div class="mdui-bottom-nav">
<a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
<i class="mdui-icon material-icons">history</i>
<label>Recents</label>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">favorite</i>
<label>Favorites</label>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">location_on</i>
<label>Nearby</label>
</a>
</div>
Example
<div class="mdui-bottom-nav">
<a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
<i class="mdui-icon material-icons">history</i>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">favorite</i>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">location_on</i>
</a>
</div>
Example
<div class="mdui-bottom-nav">
<a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">Recents</a>
<a href="javascript:;" class="mdui-ripple">Favorites</a>
<a href="javascript:;" class="mdui-ripple">Nearby</label></a>
</div>
只在激活状态显示文本
在 <div class="mdui-bottom-nav"></div>
元素上添加类 .mdui-bottom-nav-text-auto
即可实现该效果。
一般在拥有 4 - 5 个导航项时,使用这种方式。默认只显示图标,在激活导航项后显示文本。
Example
<div class="mdui-bottom-nav mdui-bottom-nav-text-auto">
<a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
<i class="mdui-icon material-icons">live_tv</i>
<label>Movies</label>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">music_note</i>
<label>Music</label>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">book</i>
<label>Books</label>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">library_books</i>
<label>Newsstand</label>
</a>
</div>
背景色
在 <div class="mdui-bottom-nav"></div>
元素上添加类 .mdui-color-[color]
即可为底部导航栏赋予背景色。
Example
<div class="mdui-bottom-nav mdui-bottom-nav-text-auto mdui-color-brown">
<a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white mdui-bottom-nav-active">
<i class="mdui-icon material-icons">live_tv</i>
<label>Movies</label>
</a>
<a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
<i class="mdui-icon material-icons">music_note</i>
<label>Music</label>
</a>
<a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
<i class="mdui-icon material-icons">book</i>
<label>Books</label>
</a>
<a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
<i class="mdui-icon material-icons">library_books</i>
<label>Newsstand</label>
</a>
</div>
固定到页面底部
在 body
元素上添加类 .mdui-bottom-nav-fixed
即可将底部导航栏固定在页面底部,不随滚动条滚动。
这个类需要添加在 body
元素上,而不是 .mdui-bottom-nav
元素上,因为它除了固定应用栏外,还会为 body
添加 padding-bottom
,使底部导航栏不会覆盖页面内容。
自动隐藏
添加类 .mdui-bottom-nav-scroll-hide
即可在页面向下滚动时隐藏底部导航栏,向上滚动时显示底部导航栏。
注意:
<body class="mdui-bottom-nav-fixed">
<div class="mdui-bottom-nav mdui-bottom-nav-scroll-hide">
......
</div>
</body>
运行
事件
事件名 |
目标 |
描述 |
参数 |
change.mdui.bottomNav |
<div class="mdui-bottom-nav"></div> |
切换导航项时会触发该事件。 |
event._detail.index :激活的导航项的索引号。 |
CSS 类名列表
类名 |
效果 |
.mdui-bottom-nav |
定义底部导航栏组件。 |
.mdui-bottom-nav-active |
使导航项处于激活状态。 |
.mdui-bottom-nav-text-auto |
使导航栏只在激活状态显示文本。 |
.mdui-bottom-nav-fixed |
使导航栏固定到页面底部。 |
.mdui-bottom-nav-scroll-hide |
在页面向下滚动时隐藏底部导航栏,向上滚动时显示底部导航栏。 |