阅读(4653) 赞(16)

底部导航栏

2017-05-26 00:37:34 更新

底部导航栏固定在页面底部，可以拥有 3 - 5 个选项。它通常只在手机上使用。每个页面只能拥有一个底部导航栏。

调用方式

只需编写 HTML 即可生效。

相关资料

Material Design 底部导航设计规范

样式

基本样式

下面的例子同时显示图标和文本，通常在只有 3 个导航项时使用。

含类 .mdui-bottom-nav-active 的导航项将处于默认激活状态。

www.mdui.org - 底部导航栏 - 基本样式

只显示图标

www.mdui.org - 底部导航栏 - 只显示图标

只显示文本

www.mdui.org - 底部导航栏 - 只显示文本

只在激活状态显示文本

在 <div class="mdui-bottom-nav"></div> 元素上添加类 .mdui-bottom-nav-text-auto 即可实现该效果。

一般在拥有 4 - 5 个导航项时，使用这种方式。默认只显示图标，在激活导航项后显示文本。

www.mdui.org - 底部导航栏 - 只在激活状态显示文本

背景色

在 <div class="mdui-bottom-nav"></div> 元素上添加类 .mdui-color-[color] 即可为底部导航栏赋予背景色。

www.mdui.org - 底部导航栏 - 背景色

固定到页面底部

在 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	在页面向下滚动时隐藏底部导航栏，向上滚动时显示底部导航栏。

← 抽屉式导航