底部导航栏

样式

基本样式

下面的例子同时显示图标和文本，通常在只有 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

Recents Favorites Nearby

<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

Movies Music Books Newsstand

<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

Movies Music Books Newsstand

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

调用方式

相关阅读

样式

基本样式

只显示图标

只显示文本

只在激活状态显示文本

背景色

固定到页面底部

自动隐藏

事件

CSS 类名列表