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 按鈕