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 定位：

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

示例

位于指定容器内

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

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

Content

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar scroll-target=".example-scroll-target">Content</mdui-bottom-app-bar>

  <div class="example-scroll-target" style="height: 200px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

源码

滚动时隐藏

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

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

Content

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior"
  >Content</mdui-bottom-app-bar>

  <div class="example-scroll-behavior" style="height: 200px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

源码

固定浮动操作按钮

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

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar
    fab-detach
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-fab-detach"
  >
    <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>

  <div class="example-fab-detach" style="height: 200px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

源码

API

属性

HTML 属性	JavaScript 属性	类型	默认值
`hide`	`hide`	`boolean`	`false`
是否隐藏
`fab-detach`	`fabDetach`	`boolean`	`false`
是否让底部应用栏中的 `<mdui-fab>` 组件脱离应用栏。如果为 `true`，则当应用栏隐藏后，`<mdui-fab>` 仍会停留在页面上
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
滚动行为。可选值为： `hide`：滚动时隐藏
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
需要监听其滚动事件的元素。值可以是 CSS 选择器、DOM 元素、或 JQ 对象。默认监听 `window` 的滚动事件
`scroll-threshold`	`scrollThreshold`	`number`	-
在滚动多少距离之后触发滚动行为，单位为 `px`
`order`	`order`	`number`	-
该组件在 `<mdui-layout>` 中的布局顺序，按从小到大排序。默认为 `0`

事件

名称
`show`
开始显示时，事件被触发。可以通过调用 `event.preventDefault()` 阻止显示
`shown`
显示动画完成时，事件被触发
`hide`
开始隐藏时，事件被触发。可以通过调用 `event.preventDefault()` 阻止隐藏
`hidden`
隐藏动画完成时，事件被触发

Slots

名称
默认
底部应用栏内部的元素

CSS 自定义属性

名称
`--shape-corner`
组件的圆角大小。可以指定一个具体的像素值；但更推荐引用设计令牌
`--z-index`
组件的 CSS `z-index` 值

Badge 徽标

Button 按钮