Skip to main content

 

UIを設計する

 

OutSystems

Tabsパターン

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

使用タイミング

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

使用方法

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

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

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

入力パラメータ

Tabs

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

TabsHeaderItem

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

TabsContentItem

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

レイアウトおよびクラス

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?