Skip to main content

 

 

 

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

Tabsのリファレンス

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
Active Header .tabs-header-item.active アクティブなヘッダーです(色付きの下線によって示されます)。
Active Tab .tabs-content-item.active アクティブなコンテンツです。

高度な設定

以下にウィジェットの高度なユースケースをいくつか示します。

アクティブなヘッダーのスタイルを変更する

CSSエディタで以下のCSSを記述し、yourcolor値を変更します。

.tabs-header-item.active {
    border-bottom: var( --border-size-m) solid yourcolor;
}

または、CSS変数var(--color-yourcolor)を使用します。

例:

.tabs-header-item.active {
    background: border-bottom: var( --border-size-m) solid var(--color-red)
}

タブに背景色を追加する

1.タブをコンテナに含めます。 1.クラスbackground-blue-lighter text-neutral-0を追加します。これによりライトブルーの背景色が追加され、テキストが強制的に白に設定されます。 1.アプリケーションをパブリッシュします。

  • Was this article helpful?