この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

lightning:tabset (ベータ)

タブのリストを表します。

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

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

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

次に例を示します。

1<aura:component>
2    <lightning:tabset>
3        <lightning:tab label="Item One">
4            Sample Content One
5        </lightning:tab>
6        <lightning:tab label="Item Two">
7            Sample Content Two
8        </lightning:tab>
9    </lightning:tabset>
10</aura:component>

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

1<lightning:tabset variant="scoped">
2    <lightning:tab onactive="{! c.handleActive }" label="Accounts" id="accounts" />
3    <lightning:tab onactive="{! c.handleActive }" label="Cases" id="cases" />
4</lightning:tabset>

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

1({
2    handleActive: function (cmp, event) {
3        var tab = event.getSource();
4        switch (tab.get('v.id')) {
5            case 'accounts' :
6                this.injectComponent('c:myAccountComponent', tab);
7                break;
8            case 'cases' :
9                this.injectComponent('c:myCaseComponent', tab);
10                break;
11        }
12    },
13    injectComponent: function (name, target) {
14        $A.createComponent(name, {
15        }, function (contentComponent, status, error) {
16            if (status === "SUCCESS") {
17                target.set('v.body', contentComponent);
18            } else {
19                throw new Error(error);
20            }
21        });
22    }
23})

使用上の考慮事項

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

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

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

1<aura:component>
2    <aura:attribute name="opts" type="List" default="['red', 'blue', 'green']" />   
3    <lightning:tabset>
4        <lightning:tab label="View Options">
5           <lightning:select name="colors" label="Select a color:">
6                    <aura:iteration items="{!v.opts}" var="option">
7                        <option>{! option }</option>
8                    </aura:iteration>
9            </lightning:select>
10        </lightning:tab>
11    </lightning:tabset>
12</aura:component>

属性

属性名	属性型	説明
`body`	ComponentDefRef[]	コンポーネントのボディ。1 つ以上の lightning:tab コンポーネントを含めることができます。
`class`	String	コンポーネントの基本クラスに加え、外部要素の CSS クラス。
`onselect`	Action	タブがクリックされたときに実行されるアクション。
`selectedTabId`	String	デフォルトで開く特定のタブを設定できます。この属性が使用されていない場合、デフォルトで最初のタブが開きます。
`variant`	String	variant は、タブセットの外観を変更します。variant の有効な値は、default および scoped です。

Lightning コンポーネント開発者ガイド

lightning:tabset (ベータ)

属性