lightning:tabset (ベータ)

lightning:tabset は、複数のコンテンツ領域があり、一度に 1 つのみが表示されるタブ付きコンテナを表示します。タブは横一列で表示され、その下にコンテンツが表示されます。tabset は、そのボディの一部として複数の lightning:tab コンポーネントを保持できます。最初のタブがデフォルトで有効になりますが、対象タブで selectedTabId 属性を設定してデフォルトのタブを変更できます。

タブセットの外観を変更するには、variant 属性を使用します。variant 属性は、default、scoped、または vertical に設定できます。variant が default の場合、有効なタブに下線が表示されます。タブセットのスタイル設定が scoped の場合、コンテナが閉じた状態で表示され、有効なタブの境界線が強調表示されます。垂直方向 (vertical) のタブセットでは、水平方向ではなく垂直方向にタブを表示する、スコープ設定された (scoped) タブセットが表示されます。

このコンポーネントは、Lightning Design System のタブからスタイル設定を継承します。

次に例を示します。

タブにコンテンツを遅延読み込みする場合は、onactive 属性を使用して、タブのボディをプログラムで挿入します。次に、有効な場合にコンテンツが読み込まれる 2 つのタブの例を示します。

クライアント側ヘルパーで、$A.createComponent() を使用して、コンテンツを追加する前に選択されたタブを渡します。

読み込んだタブ数が多くてビューポートの幅に収まらない場合は、タブセットがオーバーフローしたタブのナビゲーションボタンを設定します。

このコンポーネントでは、実行中に本文が作成されます。初期化中にはコンポーネントを参照できません。代わりに、コンポーネント属性とバインドする値を使用して、コンテンツを設定できます。

たとえば、init ハンドラを使用して初期化時にオプションのリストを動的に読み込む方法で、タブセットに lightning:select コンポーネントを作成することはできません。他方、コンポーネント属性を値にバインドする方法で、オプションのリストを作成することはできます。デフォルトで、オプションの value 属性には、渡されたオプションと同じ値が指定されます (ただし、明示的に値を割り当てる場合を除く)。