NavigationBar
コンテンツを整理し、上下に階層化されたリンクを使用してアプリケーション内をすばやく移動できるようにします。これらの階層化されたリンクは、様々な階層レベルで表示することができます。NavigationBarパターンでは、ナビゲーションバーアイテムとナビゲーションバーサブアイテムを使用して必要な構造を作成します。
エンドユーザーがアプリケーションのメインセクションを移動する必要があり、同時に別のサブセクションもすばやく参照できるようにしておく必要がある場合に使用します。
使用方法
-
NavigationBarパターンをプレビューにドラッグします。
-
必要な数のNavigationBarItemをドラッグします。
-
NavigationBarItemで、必要な数のNavigationBarSubItemをドラッグします。
-
オプションの入力パラメータをデフォルト値に設定します。
-
パブリッシュしてテストします。
入力パラメータ
NavigationBar
| 入力名 | 説明 | 型 | 必須 | デフォルト値 |
|---|---|---|---|---|
| IsFixed | FixedがTrueの場合、NavigationBarは常に画面内の同じ位置に配置されます。Falseに設定した場合、ページコンテンツとともにスクロールします。 | Boolean | False | True |
| TopPosition | NavigationBarを固定するときの上の位置を設定します。数字のみを挿入すると、ピクセル単位が自動的に追加されます。 | Integer | False | なし |
| MultipleItems | 複数のNavigationBarItemを開き、Accordionの効果を持たせることができます。 | Boolean | False | True |
| ExtendedClass | このブロックにカスタムスタイルクラスを追加します。 | Text | False | なし |
NavigationBarItem
| 入力名 | 説明 | 型 | 必須 | デフォルト値 |
|---|---|---|---|---|
| IsActive | IsActiveをTrueに設定し、選択された要素として定義します。 | Boolean | False | False |
| IsOpen | Trueの場合、描画時にNavigationBarItemが開きます。 | Boolean | False | False |
| ExtendedClass | このブロックにカスタムスタイルクラスを追加します。 | Text | False | なし |
NavigationBarSubItem
| 入力名 | 説明 | 型 | 必須 | デフォルト値 |
|---|---|---|---|---|
| IsActive | IsActiveをTrueに設定し、選択された要素として定義します。 | Boolean | False | False |
レイアウトおよびクラス
CSSセレクタ
| 要素 | CSSクラス | 説明 |
|---|---|---|
| .navigation-bar | .is--sticky | NavigationBarの位置を固定するかどうかを定義します |
| .navigation-bar-item | .is--active | 現在のNavigationBarItemがアクティブかどうかを定義します |
| .navigation-bar-item | .is--open | 現在のNavigationBarItemが開いているかどうかを定義します |
| .navigation-bar-item | .is--closed | 現在のNavigationBarItemが閉じているかどうかを定義します |
| .navigation-bar-item-content | .is--active | 現在のNavigationBarSubItemがアクティブかどうかを定義します |
| .navigation-bar-item-content | .is--open | 現在のNavigationBarSubItemが開いているかどうかを定義します |
| .navigation-bar-item-content | .is--closed | 現在のNavigationBarSubItemが閉じているかどうかを定義します |
| .navigation-bar-item-content | .is--expanded | 現在のNavigationBarSubItemが展開されているかどうかを定義します |
| .navigation-bar-item-content | .is--collapsed | 現在のNavigationBarSubItemが折りたたまれているかどうかを定義します |
高度なユースケース
ListRecordsを持つNavigationBarを使用する
-
NavigationBarをプレビューにドラッグします。
-
［Content］プレースホルダに、ListRecordsウィジェットをドラッグします。
-
ListRecordsのLine Separatorを「None」に設定します。
-
ListRecordsウィジェットに、NavigationBarItemをドラッグします。
-
NavigationBarItemで、Expressionを使用して必要なデータベースコンテンツをプレースホルダに表示します。オプションで、NavigationBarSubItemを［Content］プレースホルダにドラッグしてそこでExpressionを設定することもできます。
-
パブリッシュしてテストします。
NavigationBarItemのアクティブ時の色を変更する
- CSSエディタで以下のCSSを記述し、
yourcolorおよびyourelementを変更します。
`.navigation-bar-item.is--active yourelement {
color: yourcolor;
}`
- または、CSS変数
var(--color-yourcolor)を使用します。
`.navigation-bar-item.is--active yourelement {
color: var(--color-yourcolor);
}`
NavigationBarSubItemのアクティブ時の色を変更する
- CSSエディタで以下のCSSを記述し、
yourcolorおよびyourelementを変更します。
`.navigation-bar-item-subitem.is--active yourelement {
color: yourcolor;
}`
- または、CSS変数
var(--color-yourcolor)を使用します。
`.navigation-bar-item-subitem.is--active yourelement {
color: var(--color-yourcolor);
}`
デバイスの互換性
Internet Explorerでは、position: fixedをposition: stickyの代わりに使用します。後者はサポートされていません。