NavigationBar 底部导航栏

导航栏用于在移动端页面中方便地在几个主要页面之间进行切换。

使用方法

按需导入组件:

import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';

按需导入组件的 TypeScript 类型:

import type { NavigationBar } from 'mdui/components/navigation-bar.js';
import type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js';

使用示例:(示例中的 style="position: relative" 仅用于演示,实际使用时请移除该样式。)

Item 1 Item 2 Item 3
<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>

注意事项:

该组件默认使用 position: fixed 定位,并会自动在 body 上添加 padding-bottom 样式,以防止页面内容被组件遮挡。但在以下两种情况下,会默认使用 position: absolute 定位:

  1. 当指定了 scroll-target 属性时。此时会在 scroll-target 的元素上添加 padding-bottom 样式。
  2. 当组件位于 <mdui-layout></mdui-layout> 中时。此时不会添加 padding-bottom 样式。

示例

文本标签显示状态

导航栏中的文本标签默认在导航项小于等于 3 个时始终显示;当导航项大于 3 个时,仅显示选中状态的文本。

你可以通过在 <mdui-navigation-bar> 组件上设置 label-visibility 属性来调整文本标签的显示状态。可选值有:

  • selected:仅显示选中状态的文本
  • labeled:始终显示文本
  • unlabeled:始终不显示文本

位于指定容器内

默认情况下,导航栏会相对于当前窗口,在页面底部显示。

如果你希望将导航栏放在指定的容器内,可以在 <mdui-navigation-bar> 组件上指定 scroll-target 属性。该属性的值应为可滚动内容的容器的 CSS 选择器或 DOM 元素。此时,导航栏会相对于父元素显示(你需要自行在父元素上添加 position: relative; overflow: hidden 样式)。

滚动时隐藏

通过在 <mdui-navigation-bar> 组件上设置 scroll-behavior 属性为 hide,可以实现页面向下滚动时隐藏导航栏,向上滚动时显示导航栏的效果。

使用 scroll-threshold 属性,可以设置滚动多少像素后开始隐藏导航栏。

图标

<mdui-navigation-bar-item> 组件上,icon 属性用于设置未激活状态的导航项图标,active-icon 属性用于设置激活状态的导航项图标。也可以通过 iconactive-icon slot 来设置未激活和激活状态的图标元素。

<mdui-navigation-bar-item> 组件上设置 href 属性,可以将导航项变为链接。此时,还可以使用与链接相关的属性:downloadtargetrel

徽标

<mdui-navigation-bar-item> 组件中,可以通过 badge slot 添加徽章。

HTML 属性JavaScript 属性Reflect类型默认值

是否隐藏

文本的可视状态。可选值包括:

  • auto:当选项小于等于3个时,始终显示文本;当选项大于3个时,仅显示选中状态的文本
  • selected:仅在选中状态显示文本
  • labeled:始终显示文本
  • unlabeled:始终不显示文本

当前选中的 <mdui-navigation-bar-item> 的值

滚动行为。可选值包括:

  • hide:滚动时隐藏

需要监听其滚动事件的元素。值可以是 CSS 选择器、DOM 元素、或 JQ 对象。默认监听 window 的滚动事件

在滚动多少距离之后触发滚动行为,单位为 px

该组件在 <mdui-layout> 中的布局顺序,按从小到大排序。默认为 0

名称

值变化时触发

开始显示时,事件被触发。可以通过调用 event.preventDefault() 阻止显示

显示动画完成时,事件被触发

开始隐藏时,事件被触发。可以通过调用 event.preventDefault() 阻止隐藏

隐藏动画完成时,事件被触发

名称

<mdui-navigation-bar-item> 组件

名称

组件的圆角大小。可以指定一个具体的像素值;但更推荐引用设计令牌

组件的 CSS z-index

HTML 属性JavaScript 属性Reflect类型默认值

未激活状态的 Material Icons 图标名。也可以通过 slot="icon" 设置

激活状态的 Material Icons 图标名。也可以通过 slot="active-icon" 设置

导航项的值

链接的目标 URL。

如果设置了此属性,组件内部将渲染为 <a> 元素,并可以使用链接相关的属性。

下载链接的目标。

Note:仅在设置了 href 属性时,此属性才有效。

链接的打开方式。可选值包括:

  • _blank:在新窗口中打开链接
  • _parent:在父框架中打开链接
  • _self:默认。在当前框架中打开链接
  • _top:在整个窗口中打开链接

Note:仅在设置了 href 属性时,此属性才有效。

当前文档与被链接文档之间的关系。可选值包括:

  • alternate:当前文档的替代版本
  • author:当前文档或文章的作者
  • bookmark:永久链接到最近的祖先章节
  • external:引用的文档与当前文档不在同一站点
  • help:链接到相关的帮助文档
  • license:当前文档的主要内容由被引用文件的版权许可覆盖
  • me:当前文档代表链接内容的所有者
  • next:当前文档是系列中的一部分,被引用的文档是系列的下一个文档
  • nofollow:当前文档的作者或发布者不认可被引用的文件
  • noreferrer:不包含 Referer 头。类似于 noopener 的效果
  • opener:如果超链接会创建一个顶级浏览上下文(即 target 属性值为 _blank),则创建一个辅助浏览上下文
  • prev:当前文档是系列的一部分,被引用的文档是系列的上一个文档
  • search:提供一个资源链接,可用于搜索当前文件及其相关页面
  • tag:提供一个适用于当前文档的标签(由给定地址识别)

Note:仅在指定了 href 属性时可用。

是否在页面加载完成后自动获取焦点

元素在使用 Tab 键切换焦点时的顺序

名称参数返回值

模拟鼠标点击元素

将焦点设置到当前元素。

可以传入一个对象作为参数,该对象的属性包括:

  • preventScroll:默认情况下,元素获取焦点后,页面会滚动以将该元素滚动到视图中。如果不希望页面滚动,可以将此属性设置为 true

移除当前元素的焦点

名称

获得焦点时触发

失去焦点时触发

名称

导航项文本

图标

激活状态的图标元素

徽标

名称

导航项容器

指示器

徽标

图标

激活状态的图标

导航项文本

名称

指示器的圆角大小。可以指定一个具体的像素值;但更推荐引用设计令牌

MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
概述 安装 快速入门 TypeScript 支持 IDE 支持 本地化 常见问题
样式
暗色模式 动态配色 文章排版 设计令牌
与框架集成
React Vue Angular
组件
Button 按钮ButtonIcon 图标按钮Fab 浮动操作按钮SegmentedButton 分段按钮Chip 纸片Card 卡片Checkbox 复选框Radio 单选框Switch 开关切换Slider 滑块RangeSlider 范围滑块List 列表Collapse 折叠面板Tabs 选项卡Dropdown 下拉组件Menu 菜单Select 选择框TextField 文本框LinearProgress 线性进度指示器CircularProgress 圆形进度指示器Dialog 对话框Divider 分割线Avatar 头像Badge 徽标Icon 图标Tooltip 工具提示Snackbar 消息条NavigationBar 底部导航栏NavigationDrawer 侧边抽屉栏NavigationRail 侧边导航栏BottomAppBar 底部应用栏TopAppBar 顶部应用栏Layout 布局
工具函数
jq 工具库 dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
独立包
@mdui/icons 图标组件库