Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

Navigation Barのリファレンス

レイアウトおよびクラス

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を持つNavigation Barを使用する

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

  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);
}
  • Was this article helpful?