TopAppBarトップアプリバー
トップアプリバーは、ページの上部に重要な情報と関連操作を表示し、ユーザーに明確なナビゲーションと便利な機能アクセスを提供します。
コンポーネントを必要に応じてインポートします：
import 'mdui/components/top-app-bar.js';
import 'mdui/components/top-app-bar-title.js';
コンポーネントの TypeScript 型を必要に応じてインポートします：
import type { TopAppBar } from 'mdui/components/top-app-bar.js';
import type { TopAppBarTitle } from 'mdui/components/top-app-bar-title.js';
使用例：（例中の style="position: relative" はデモンストレーションのためだけのもので、実際の使用時はこのスタイルを削除してください。）
<mdui-top-app-bar style="position: relative;">
<mdui-button-icon icon="menu"></mdui-button-icon>
<mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
<div style="flex-grow: 1"></div>
<mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-app-bar>
注意事項：
このコンポーネントはデフォルトで position: fixed を使用し、自動的に body に padding-top スタイルを追加して、ページコンテンツがこのコンポーネントに隠れないようにします。
ただし、以下の 2 つの場合はデフォルトで position: absolute を使用します：
scroll-target 属性が指定されている場合。この場合、scroll-target の要素に padding-top スタイルを追加します。<mdui-layout></mdui-layout> コンポーネント内にある場合。この場合、padding-top スタイルは追加されません。
デフォルトでは、トップアプリバーは現在のウィンドウを基準にしてページの上部に表示されます。
トップアプリバーを指定されたコンテナ内に配置したい場合は、<mdui-top-app-bar> コンポーネントに scroll-target 属性を指定します。その値は、スクロール可能なコンテンツのコンテナの CSS セレクタまたは DOM 要素とします。この場合、トップアプリバーは親要素を基準にして表示されます（親要素にスタイル position: relative; overflow: hidden を自分で追加する必要があります）。
<div style="position: relative;overflow: hidden">
<mdui-top-app-bar scroll-target=".example-scroll-target">
<mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
</mdui-top-app-bar>
<div class="example-scroll-target" style="height: 160px;overflow: auto;">
<div style="height: 1000px"></div>
</div>
</div>
ソース
<mdui-top-app-bar> コンポーネントで variant 属性を使用することで、トップアプリバーの形状を設定できます。
Title
center-aligned
small
medium
large
<div style="position: relative;overflow: hidden">
<mdui-top-app-bar variant="small" scroll-target=".example-variant" class="example-variant-bar">
<mdui-button-icon icon="menu"></mdui-button-icon>
<mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
<div style="flex-grow: 1"></div>
<mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-app-bar>
<div class="example-variant" style="height: 160px;overflow: auto;">
<div style="height: 1000px">
<mdui-segmented-button-group selects="single" value="small">
<mdui-segmented-button value="center-aligned">center-aligned</mdui-segmented-button>
<mdui-segmented-button value="small">small</mdui-segmented-button>
<mdui-segmented-button value="medium">medium</mdui-segmented-button>
<mdui-segmented-button value="large">large</mdui-segmented-button>
</mdui-segmented-button-group>
</div>
</div>
</div>
<script>
const topAppBar = document.querySelector(".example-variant-bar");
const segmentedButtonGroup = document.querySelector(".example-variant");
segmentedButtonGroup.addEventListener("change", (event) => {
topAppBar.variant = event.target.value;
});
</script>
ソース
<mdui-top-app-bar> コンポーネントに scroll-behavior 属性を設定することで、ページスクロール時のトップアプリバーの動作を定義できます。複数の動作を同時に設定する場合は、スペースで区切ります。
スクロール動作には以下のものがあります：
hide：ページを下にスクロールするとトップアプリバーを非表示にし、上にスクロールすると表示します。shrink：variant 属性が medium または large の場合のみ有効です。ページを下にスクロールするとトップアプリバーを展開し、上にスクロールすると縮小します。elevate：ページを下にスクロールするとトップアプリバーに影を追加し、ページがトップに戻ると影を削除します。
scroll-threshold 属性を使用して、スクロールが何ピクセル進んだらトップアプリバーのスクロール動作をトリガーし始めるかを設定できます。（注意、応答性を高めるため、elevate スクロール動作を使用する場合は、scroll-threshold 属性を設定しないでください。）
例：スクロール時に非表示
<div style="position: relative;overflow: hidden">
<mdui-top-app-bar
scroll-behavior="hide"
scroll-threshold="30"
scroll-target=".example-scroll-behavior-hide"
>
<mdui-button-icon icon="menu"></mdui-button-icon>
<mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
<div style="flex-grow: 1"></div>
<mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-app-bar>
<div class="example-scroll-behavior-hide" style="height: 160px;overflow: auto;">
<div style="height: 1000px"></div>
</div>
</div>
ソース<div style="position: relative;overflow: hidden">
<mdui-top-app-bar
scroll-behavior="elevate"
scroll-target=".example-scroll-behavior-elevate"
>
<mdui-button-icon icon="menu"></mdui-button-icon>
<mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
<div style="flex-grow: 1"></div>
<mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-app-bar>
<div class="example-scroll-behavior-elevate" style="height: 160px;overflow: auto;">
<div style="height: 1000px"></div>
</div>
</div>
ソース<div style="position: relative;overflow: hidden">
<mdui-top-app-bar
variant="medium"
scroll-behavior="shrink"
scroll-threshold="30"
scroll-target=".example-scroll-behavior-shrink"
>
<mdui-button-icon icon="menu"></mdui-button-icon>
<mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
<div style="flex-grow: 1"></div>
<mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-app-bar>
<div class="example-scroll-behavior-shrink" style="height: 160px;overflow: auto;">
<div style="height: 1000px"></div>
</div>
</div>
ソース<div style="position: relative;overflow: hidden">
<mdui-top-app-bar
variant="medium"
scroll-behavior="shrink elevate"
scroll-target=".example-scroll-behavior-shrink-elevate"
>
<mdui-button-icon icon="menu"></mdui-button-icon>
<mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
<div style="flex-grow: 1"></div>
<mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-app-bar>
<div class="example-scroll-behavior-shrink-elevate" style="height: 160px;overflow: auto;">
<div style="height: 1000px"></div>
</div>
</div>
ソース
variant 属性が medium または large で、かつ scroll-behavior 属性が shrink のトップアプリバーでは、<mdui-top-app-bar-title> コンポーネントに label-large スロットを追加して、展開状態のテキストを設定できます。
これが縮小状態のタイトルです
これが展開状態のタイトルです
<div style="position: relative;overflow: hidden">
<mdui-top-app-bar
variant="medium"
scroll-behavior="shrink elevate"
scroll-target=".example-label-large-slot"
>
<mdui-button-icon icon="menu"></mdui-button-icon>
<mdui-top-app-bar-title>
これが縮小状態のタイトルです
<span slot="label-large">これが展開状態のタイトルです</span>
</mdui-top-app-bar-title>
<div style="flex-grow: 1"></div>
<mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-app-bar>
<div class="example-label-large-slot" style="height: 160px;overflow: auto;">
<div style="height: 1000px"></div>
</div>
</div>
ソース| HTML 属性 | JavaScript プロパティ | Reflect | 型 | デフォルト値 |
|---|
variant | variant | | 'center-aligned' | 'small' | 'medium' | 'large' | 'small' |
トップアプリバーの形状です。既定値は small です。次の値を指定します：
center-aligned：小型アプリバー。タイトルが中央揃えsmall：小型アプリバーmedium：中型アプリバーlarge：大型アプリバー
|
hide | hide | | boolean | false |
非表示にするかどうかを指定します。
|
shrink | shrink | | boolean | false |
variant="medium" または variant="large" の場合にのみ有効です。variant="small" のスタイルに縮小するかどうかを指定します。
|
scroll-behavior | scrollBehavior | | 'hide' | 'shrink' | 'elevate' | - |
スクロール時の動作です。スペース区切りで複数の値を同時に使用できます。次の値があります：
hide：スクロール時に非表示shrink：中型・大型アプリバーで使用可能。スクロール時に小型アプリバーのスタイルに縮小elevate：スクロール時に影を追加
|
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 |
非表示アニメーションが完了したときに発生するイベントです。
|
