Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

Tabs

このパターンを使用すると、クリックするだけで、異なる領域に分割できる大量の情報を表示できます。ヘッダーには、カウンタ、バッジ、アイコンなど他のウィジェットを含めることができます。

コンテンツをフラットな構造のセクションに分割する必要がある場合、Tabsパターンを使用します。ただし、大きいフォーム内での使用は避けてください。

使用方法

[Header]プレースホルダと[Content]プレースホルダに、TabsHeaderItemブロックとTabsContentItemブロックをそれぞれ入力します。必要に応じて任意の数を使用できます。パラメータで、最初にアクティブなタブとタブの方向や位置揃えを指定します。

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

  2. コンテンツを設定し、パブリッシュします。

デモ

入力パラメータ

Tabs

入力名 説明 必須 デフォルト値
ActiveTab アクティブなタブを設定します。 Text False なし
Orientation Verticalの場合はコンテンツとヘッダーが並んで表示され、Horizontalの場合はコンテンツの上にヘッダーが表示されます。 Orientation Identifier False Entities.Orientation.Horizontal
IsJustified Tabsのヘッダー項目が行内で均等に配置され、最初の項目が先頭に、最後の項目が末尾に配置されます。 Boolean False 1
IsRight Tabsのヘッダー項目を右に詰めて配置します。OrientationパラメータがVertivalに設定されている場合のみ有効です。 Boolean False False
ExtendedClass このブロックにカスタムスタイルクラスを追加します。Text False なし

TabsHeaderItem

入力名 説明 必須 デフォルト値
DataTab 名前を設定し、TabsContentItemに関連付けます。ペアとなるHeaderItemと同じで、一意である必要があります。 Text True なし

TabsContentItem

入力名 説明 必須 デフォルト値
DataTab TabsHeaderItemと関連付ける値。ペアとなるContentItemと同じで、一意である必要があります。 Text True none

レイアウトおよびクラス

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

  • Was this article helpful?