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 スタイルを追加します。

ただし、次の 2 つのケースではデフォルトで 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 ボタン