NavigationBarボトムナビゲーションバー
ナビゲーションバーは、モバイル端末の画面上でいくつかの主要なページ間を簡単に切り替えるために使用されます。
コンポーネントを必要に応じてインポートします：
import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';
コンポーネントの TypeScript 型を必要に応じてインポートします：
import type { NavigationBar } from 'mdui/components/navigation-bar.js';
import type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js';
使用例：（例中の style="position: relative" はデモンストレーションのためだけのもので、実際の使用時はこのスタイルを削除してください。）
Item 1
Item 2
Item 3
<mdui-navigation-bar value="item-1" style="position: relative">
<mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>
注意事項：
このコンポーネントはデフォルトで position: fixed を使用し、自動的に body に padding-bottom スタイルを追加して、ページコンテンツがコンポーネントに隠れないようにします。ただし、以下の 2 つの場合はデフォルトで position: absolute を使用します：
scroll-target 属性が指定されている場合。この場合、scroll-target の要素に padding-bottom スタイルを追加します。- コンポーネントが
<mdui-layout></mdui-layout> 内にある場合。この場合、padding-bottom スタイルは追加されません。
ナビゲーションバーのテキストラベルは、デフォルトではナビゲーション項目が 3 つ以下の場合に常に表示されます。ナビゲーション項目が 3 つより多い場合、選択状態のテキストのみが表示されます。
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 4
<mdui-navigation-bar value="item-1" style="position: relative">
<mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>
<br/>
<mdui-navigation-bar value="item-1" style="position: relative">
<mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="directions_railway" value="item-3">Item 3</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="people" value="item-4">Item 4</mdui-navigation-bar-item>
</mdui-navigation-bar>
ソース<mdui-navigation-bar> コンポーネントに label-visibility 属性を設定することで、テキストラベルの表示状態を調整できます。使用可能な値は以下の通りです：
selected：選択状態のテキストのみ表示labeled：常にテキストを表示unlabeled：常にテキストを表示しない
Item 1
Item 2
Item 3
selected
labeled
unlabeled
<mdui-navigation-bar value="item-1" label-visibility="selected" style="position: relative" class="example-label">
<mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>
<mdui-segmented-button-group value="selected" selects="single" style="margin-top: 16px">
<mdui-segmented-button value="selected">selected</mdui-segmented-button>
<mdui-segmented-button value="labeled">labeled</mdui-segmented-button>
<mdui-segmented-button value="unlabeled">unlabeled</mdui-segmented-button>
</mdui-segmented-button-group>
<script>
const navigationBar = document.querySelector(".example-label");
const segmentedButtonGroup = navigationBar.nextElementSibling;
segmentedButtonGroup.addEventListener("change", (event) => {
navigationBar.labelVisibility = event.target.value;
});
</script>
ソース
デフォルトでは、ナビゲーションバーは現在のウィンドウを基準にしてページの下部に表示されます。
ナビゲーションバーを指定されたコンテナ内に配置したい場合は、<mdui-navigation-bar> コンポーネントに scroll-target 属性を指定します。この属性の値は、スクロール可能なコンテンツのコンテナの CSS セレクタまたは DOM 要素とします。この場合、ナビゲーションバーは親要素を基準にして表示されます（親要素に position: relative; overflow: hidden スタイルを自分で追加する必要があります）。
<div style="position: relative;overflow: hidden">
<mdui-navigation-bar scroll-target=".example-scroll-target" value="item-1">
<mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>
<div class="example-scroll-target" style="height: 160px;overflow: auto;">
<div style="height: 1000px">ページコンテンツ</div>
</div>
</div>
ソース
<mdui-navigation-bar> コンポーネントに scroll-behavior 属性を hide に設定することで、ページを下にスクロールした時にナビゲーションバーを非表示にし、上にスクロールした時に表示するようにできます。
scroll-threshold 属性を使用して、スクロールが何ピクセル進んだらナビゲーションバーを非表示にし始めるかを設定できます。
<div style="position: relative;overflow: hidden">
<mdui-navigation-bar
scroll-behavior="hide"
scroll-threshold="30"
scroll-target=".example-scroll-behavior"
value="item-1"
>
<mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>
<div class="example-scroll-behavior" style="height: 160px;overflow: auto;">
<div style="height: 1000px">ページコンテンツ</div>
</div>
</div>
ソース
<mdui-navigation-bar-item> コンポーネントでは、icon 属性は未アクティブ状態のナビゲーション項目アイコンを設定し、active-icon 属性はアクティブ状態のナビゲーション項目アイコンを設定します。icon と active-icon スロットを使用して未アクティブ状態とアクティブ状態のアイコン要素を設定することもできます。
Item 1
Item 2
<mdui-navigation-bar value="item-1" style="position: relative">
<mdui-navigation-bar-item
icon="place--outlined"
active-icon="place"
value="item-1"
>Item 1</mdui-navigation-bar-item>
<mdui-navigation-bar-item value="item-2">
Item 2
<mdui-icon slot="icon" name="people--outlined"></mdui-icon>
<mdui-icon slot="active-icon" name="people"></mdui-icon>
</mdui-navigation-bar-item>
</mdui-navigation-bar>
ソース
<mdui-navigation-bar-item> コンポーネントに href 属性を設定すると、ナビゲーション項目をリンクにできます。この場合、リンク関連の属性 download、target、rel も使用できます。
Item 1
Item 2
<mdui-navigation-bar value="item-1" style="position: relative">
<mdui-navigation-bar-item icon="place" href="https://www.mdui.org" target="_blank" value="item-1">Item 1</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
</mdui-navigation-bar>
ソース
<mdui-navigation-bar-item> コンポーネントでは、badge スロットを使用してバッジを追加できます。
Item 1
99+
Item 2
<mdui-navigation-bar value="item-1" style="position: relative">
<mdui-navigation-bar-item icon="place" value="item-1">
Item 1
<mdui-badge slot="badge">99+</mdui-badge>
</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
</mdui-navigation-bar>
ソース| HTML 属性 | JavaScript プロパティ | Reflect | 型 | デフォルト値 |
|---|
icon | icon | | string | - |
非アクティブ状態のMaterial Iconsアイコン名です。slot="icon" で設定することもできます。
|
active-icon | activeIcon | | string | - |
アクティブ状態のMaterial Iconsアイコン名です。slot="active-icon" で設定することもできます。
|
value | value | | string | - |
ナビゲーションアイテムの値です。
|
href | href | | string | - |
リンク先のURLです。
この属性を設定すると、コンポーネント内部は <a> 要素としてレンダリングされ、リンク関連の属性が使用可能になります。
|
download | download | | string | - |
ダウンロードリンクの対象ファイル名です。
注：href 属性が設定されている場合にのみ有効です。
|
target | target | | '_blank' | '_parent' | '_self' | '_top' | - |
リンクの開き方です。次の値を指定します：
_blank：新しいウィンドウで開く_parent：親フレームで開く_self：デフォルト。現在のフレームで開く_top：最上位のウィンドウで開く
注：href 属性が設定されている場合にのみ有効です。
|
rel | rel | | 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag' | - |
現在のドキュメントとリンク先ドキュメントの関係です。次の値を指定します：
alternate：現在のドキュメントの代替バージョンauthor：現在のドキュメントまたは記事の作成者bookmark：直近の祖先セクションへのパーマリンクexternal：参照先ドキュメントが現在のサイトとは異なるサイトにあることを示しますhelp：関連するヘルプドキュメントへのリンクlicense：現在のドキュメントのメインコンテンツが、参照先ファイルの著作権ライセンスの対象であることを示しますme：現在のドキュメントがリンク先コンテンツの所有者を表しますnext：現在のドキュメントがシリーズの一部であり、参照先ドキュメントがシリーズの次のドキュメントですnofollow：現在のドキュメントの作成者または発行者が、参照先ファイルを推奨していないことを示しますnoreferrer：Referer ヘッダーを含めません。noopener と同様の効果ですopener：ハイパーリンクが最上位のブラウジングコンテキストを作成する場合（つまり target 属性値が _blank）、補助ブラウジングコンテキストを作成しますprev：現在のドキュメントがシリーズの一部であり、参照先ドキュメントがシリーズの前のドキュメントですsearch：現在のファイルとその関連ページを検索するために使用できるリソースへのリンクを提供しますtag：現在のドキュメントに適用されるタグ（指定されたアドレスで識別される）を提供します
注：href 属性が指定されている場合にのみ使用できます。
|
autofocus | autofocus | | boolean | false |
ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
|
tabindex | tabIndex | | number | - |
Tab キーによるフォーカス移動時の、要素の順序を指定します。
|
| 名前 | パラメーター | 戻り値 |
|---|
click | | void |
要素のマウスクリックをシミュレートします。
|
focus | options: FocusOptions (オプション)
| void |
現在の要素にフォーカスを設定します。
オプションとして、以下のプロパティを持つオブジェクトを渡すことができます：
preventScroll：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを true に設定します。
|
blur | | void |
現在の要素からフォーカスを外します。
|
| 名前 |
|---|
focus |
フォーカスを取得したときに発生します。
|
blur |
フォーカスを失ったときに発生します。
|
| 名前 |
|---|
change |
値が変化したときに発生します。
|
show |
表示が開始される直前に発生するイベントです。event.preventDefault() を呼び出すことで表示をキャンセルできます。
|
shown |
表示アニメーションが完了したときに発生するイベントです。
|
hide |
非表示が開始される直前に発生するイベントです。event.preventDefault() を呼び出すことで非表示をキャンセルできます。
|
hidden |
非表示アニメーションが完了したときに発生するイベントです。
|
| 名前 |
|---|
| デフォルト |
<mdui-navigation-bar-item> コンポーネント
|
次の章
NavigationDrawer ナビゲーションドロワー
