BottomAppBar 底部应用栏

底部应用栏主要用于在移动端页面底部展示导航项和其他重要操作。

使用方法

按需导入组件:

import 'mdui/components/bottom-app-bar.js';

按需导入组件的 TypeScript 类型:

import type { BottomAppBar } from 'mdui/components/bottom-app-bar.js';

使用示例:(注意:示例中的 style="position: relative" 是为了演示需要,实际使用时请移除该样式。)

<mdui-bottom-app-bar style="position: relative;">
  <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
  <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
  <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
  <mdui-button-icon icon="image--outlined"></mdui-button-icon>
  <div style="flex-grow: 1"></div>
  <mdui-fab icon="add"></mdui-fab>
</mdui-bottom-app-bar>

注意事项:

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

但在以下两种情况下,会默认使用 position: absolute 定位:

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

示例

位于指定容器内

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

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

滚动时隐藏

设置 scroll-behavior 属性为 hide,可以在页面向下滚动时隐藏底部应用栏,向上滚动时显示底部应用栏。

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

固定浮动操作按钮

如果底部应用栏中包含了浮动操作按钮,则可以添加 fab-detach 属性,使得在页面滚动,底部应用栏隐藏时,浮动操作按钮仍然停留在页面右下角。

API

属性

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

是否隐藏

fab-detachfabDetachbooleanfalse

是否让底部应用栏中的 <mdui-fab> 组件脱离应用栏。如果为 true,则当应用栏隐藏后,<mdui-fab> 仍会停留在页面上

scroll-behaviorscrollBehavior'hide' | 'shrink' | 'elevate'-

滚动行为。可选值为:

  • hide:滚动时隐藏
scroll-targetscrollTargetstring | HTMLElement | JQ<HTMLElement>-

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

scroll-thresholdscrollThresholdnumber-

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

orderordernumber-

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

事件

名称
show

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

shown

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

hide

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

hidden

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

Slots

名称
默认

底部应用栏内部的元素

CSS 自定义属性

名称
--shape-corner

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

--z-index

组件的 CSS z-index

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 图标组件库