底部导航栏

2018-05-26 00:49 更新

底部导航栏固定在页面底部,可以拥有 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 在页面向下滚动时隐藏底部导航栏,向上滚动时显示底部导航栏。


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

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号