Skip to main content

 

パターン

 

従来のWebアプリにのみ適用されます

 

OutSystems

NavigationBar

コンテンツを整理し、上下に階層化されたリンクを使用してアプリケーション内をすばやく移動できるようにします。これらの階層化されたリンクは、様々な階層レベルで表示することができます。NavigationBarパターンでは、ナビゲーションバーアイテムとナビゲーションバーサブアイテムを使用して必要な構造を作成します。

エンドユーザーがアプリケーションのメインセクションを移動する必要があり、同時に別のサブセクションもすばやく参照できるようにしておく必要がある場合に使用します。

使用方法

  1. NavigationBarパターンをプレビューにドラッグします。

  2. 必要な数のNavigationBarItemをドラッグします。

  3. NavigationBarItemで、必要な数のNavigationBarSubItemをドラッグします。

  4. オプションの入力パラメータをデフォルト値に設定します。

  5. パブリッシュしてテストします。

入力パラメータ

入力名 説明 必須 デフォルト値
IsFixed FixedがTrueの場合、NavigationBarは常に画面内の同じ位置に配置されます。Falseに設定した場合、ページコンテンツとともにスクロールします。 Boolean False True
TopPosition NavigationBarを固定するときの上の位置を設定します。数字のみを挿入すると、ピクセル単位が自動的に追加されます。 Integer False なし
MultipleItems 複数のNavigationBarItemを開き、Accordionの効果を持たせることができます。 Boolean False True
ExtendedClass このブロックにカスタムスタイルクラスを追加します。 Text False なし
入力名 説明 必須 デフォルト値
IsActive IsActiveをTrueに設定し、選択された要素として定義します。 Boolean False False
IsOpen Trueの場合、描画時にNavigationBarItemが開きます。 Boolean False False
ExtendedClass このブロックにカスタムスタイルクラスを追加します。 Text False なし
入力名 説明 必須 デフォルト値
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を使用する

  1. NavigationBarをプレビューにドラッグします。

  2. [Content]プレースホルダに、ListRecordsウィジェットをドラッグします。

  3. ListRecordsのLine Separatorを「None」に設定します。

  4. ListRecordsウィジェットに、NavigationBarItemをドラッグします。

  5. NavigationBarItemで、Expressionを使用して必要なデータベースコンテンツをプレースホルダに表示します。オプションで、NavigationBarSubItemを[Content]プレースホルダにドラッグしてそこでExpressionを設定することもできます。

  6. パブリッシュしてテストします。

  • 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);
}`
  • 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: fixedposition: stickyの代わりに使用します。後者はサポートされていません。

  • Was this article helpful?