タブ

Avonni Tabs コンポーネントは、単一ページ上で情報を整理・表示するのに役立ちます。情報を複数のタブに分け、ユーザーが目的の情報を見つけやすくします。

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

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

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

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

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

タブの設定方法

1. データソースの設定

Tabs がコンテンツを表示する前に、データの取得先を指定する必要があります。Avonni Tabs コンポーネントは、ニーズやタブのコンテンツ管理方法に応じて、さまざまなデータソースに接続する柔軟なオプションを提供します。

タブ名をどのように入力するかを選択してください：

2. アクティブタブの設定

Tabs コンポーネントが初めて読み込まれたときに、ユーザーに正しいタブが表示されるようにする必要があります。これは「アクティブタブ値」の設定で制御されます。

• タブ値の理解： コンポーネント内の各タブには特定の値が関連付けられており、通常はタブのラベルと同じです。この値がタブの識別子として機能します。

• デフォルトの設定： どのタブを初期的にアクティブにするかを選択するには、対応する値を「アクティブタブ値」欄に入力してください。

  • 例： たとえば「Details」というラベルのタブがあり、それをユーザーが最初に見るタブにしたい場合は、「アクティブタブ値」欄に「Details」と入力します。

重要な注意点

タブの設定で表示されている通りにタブ値を正確に入力することが重要です。スペルや大文字小文字の違いがあると、タブが正しく選択されない可能性があります。

3. スクロールの設定（オプション）

多数のタブがあり一度に画面に収まらない場合、スクロールを有効にしてユーザーがすべてのタブにアクセスできるようにできます。Avonni は2つのスクロールオプションを提供します：

• スクロール可能なタブ： このオプションでは、タブ上で左右にスワイプして画面外に隠れている追加のタブを表示できます。特にタッチデバイスでタブ間を直感的に移動するのに適しています。

• スクロールボタン： より明確な方法でタブをスクロールしたい場合は、スクロールボタンを有効にできます。これによりタブバーの両側にボタンが表示され、ユーザーはそれをクリックしてタブをスクロールできます。このオプションはタブの総数も表示するため、ユーザーがコンテンツの範囲を把握するのに役立ちます。

スクロール可能なタブとスクロールボタンのどちらを選ぶかは、デザインの好みやタブの数によります。スクロール可能なタブはよりクリーンな外観を提供し、スクロールボタンはより明確な操作とタブ数に関する情報を提供します。

4. 配置の変更

Avonni Tabs コンポーネントはタブの配置方法に柔軟性を提供します。次の2つの配置から選択できます：

• 水平： これは最も一般的なタブの配置で、セクションの上部または下部にタブが水平方向に配置されます。タブの数が限られている場合や、タブ下のコンテンツとの視覚的な階層を維持したい場合に最適なレイアウトです。

• 垂直： この配置では、タブが通常セクションの左側または右側に垂直に並びます。多くのタブがある場合や、コンテンツの水平スペースを最大化したい場合に適しています。

水平と垂直のどちらの配置を選ぶかは、デザインの好み、タブの数、およびページ全体のレイアウトによります。

5. インタラクションの定義

Interactions インタラクションにより、タブに動的な挙動を追加して、静的なナビゲーション要素以上のものにできます。

• タブをクリックしたとき： このインタラクションでは、ユーザーがタブをクリックしてアクティブにしたときに何が起こるかを定義できます。次のようなさまざまなアクションから選択できます：

  • ナビゲーション： アプリケーション内の別のページやセクションに移動する。

  • メッセージを表示： トーストメッセージを表示するかモーダルダイアログを開いて、ユーザーにフィードバックや情報を提供します。

  • さらに： 利用可能なインタラクションの全範囲を確認して、動的で魅力的なユーザー体験を作成してください

スタイリング

Avonni Tabs コンポーネントは、デザインに統合しユーザーフレンドリーな体験を提供するための幅広いスタイリングオプションを提供します。色、フォント、境界線、間隔などをカスタマイズしてブランディングや好みに合わせることができます。