タブ付きコンテナ

Tabbed Container はタブ型インターフェースを作成するレイアウトコンポーネントです。各タブはコンテナとして機能し、内部に他の Avonni コンポーネントを配置できます。

Tabs コンポーネントとの主な違い

の基本的な違いを理解すること Avonni Tabs および Tabbed Container コンポーネントは異なる目的で使用されます。

• Avonni Tabs: このコンポーネントはタブを作成するように設計されています 動的に データソースに基づいて。データソース（レコードのリスト、ピックリスト、手動入力された値など）に接続すると、コンポーネントは自動的に 各項目 に対してタブを生成します。 あなたは タブ内に他のAvonniコンポーネントをドラッグアンドドロップすることはできません。データ駆動のナビゲーション要素と考えてください。

• Tabbed Container: このコンポーネントは レイアウトコンテナです。これによりタブ構造を作成し、 手動で 追加および配置 任意の Avonniコンポーネントをタブのコンテンツ領域に配置できます。 各 各タブのレイアウトとコンテンツを独立して自由にデザインできます。これは、 構造化すること UIを整理し、他のコンポーネントを管理することに関するものです。

次のコンポーネントを使用してタブを作成します： Avonni Tabs コンポーネントを使用してタブを作成します レコードやオプションのリストに基づいて。次のコンポーネントを使用してください： Tabbed Container コンポーネントは、各タブ内に任意のコンポーネントを配置したタブ付きレイアウトを作成する場合に使用します 任意のコンポーネント 各タブ内で

タブ付きコンテナの設定

これらは 最小 機能するタブ付きコンテナを動作させるために必要な手順：

タブ付きコンテナを追加する

タブ付きコンテナコンポーネントをキャンバスにドラッグします。

タブ（アイテム）を追加する

• プロパティパネルで、次を見つけます： アイテム プロパティ。ボタン/リンクをクリックしてアイテムエディタを開きます。

• "アイテムを追加"をクリックして新しいタブを追加します。タブ機能を確認するには少なくとも2つのタブを追加してください。

• 「 各 タブ：

  • ラベル： タブ自体に表示したいテキストを入力します（例：「Details」、「Contacts」）。

  • 値： を入力します 一意の タブの値（例：「details」、「contacts」）。 スペースや特殊文字は避けてください。 この値はプログラムからのアクセス（例：アクティブタブの設定）に使用されます。

  • アイコン名： タブに表示するAvonniアイコン（またはSalesforce SLDSアイコン）の名前。タブに視覚的な手掛かりを追加します。例： utility:info, standard:account.

  • アイコンの位置：アイコンを表示する場所。可能な値は 上揃え, 左側 または 右側に.

  • ツールチップ： ユーザーがタブにマウスカーソルを重ねたときに表示される短い説明テキスト。追加の文脈や指示を提供するためにツールチップを使用します。

  • サブタイトル： テキストは表示されます 下に メインのタブラベルの下に。これは、追加の一行情報やタブの内容の簡単な説明を提供するために使用できます。

タブにコンテンツを追加する

• キャンバス上でタブ付きコンテナコンポーネントを選択します。

• プレビューでタブをクリックして、そのタブのコンテンツ領域を選択します。

• コンポーネントライブラリから他のAvonniコンポーネントをドラッグアンドドロップ 選択したタブのコンテンツ領域に。これがタブ付きコンテナを非常に強力にしている理由です。

これで完了です！この時点で、複数のタブを持つ動作するタブ付きコンテナがあり、タブを切り替えて異なるコンテンツ領域を確認できます。あなたは まず 各タブにコンテンツを追加して正しく表示させる必要があります。

追加の構成オプション

これらの設定は、タブ付きコンテナの外観と動作に関するさらなるカスタマイズと制御を提供します：

• アクティブアイテムの値： この 値 現在選択されているタブの バインド これを変数リソースに割り当てて、どのタブがプログラム的にアクティブかを制御できます および タブの変更に反応するために。

• スクロール可能： タブが利用可能な幅（横方向）や高さ（縦方向）に収まらない可能性がある場合はこれを有効にしてください。

• スクロールボタンを表示： もし スクロール可能 が有効になっている場合、明示的なスクロールボタン（矢印）を表示するかどうかを制御します。

• スコープ化： 有効にすると、タブを視覚的にグループ化します。

• 方向：

  • 横（デフォルト）： タブは上部に横並びで表示されます。

  • 縦：タブは側面（通常は左側）に沿って表示されます。

タブ選択（アクティブアイテムの値）

この アクティブアイテムの値 プロパティはどのタブが選択されているかを制御します。望ましいタブの 値 を設定します。デフォルト値を直接設定することができます。