Lightning コンポーネント開発者ガイド
jlightning:tabset (ベータ)
lightning:tabset は、複数のコンテンツ領域があり、一度に 1 つのみが表示されるタブ付きコンテナを表示します。タブは横一列で表示され、その下にコンテンツが表示されます。tabset は、そのボディの一部として複数の lightning:tab コンポーネントを保持できます。最初のタブがデフォルトで有効になりますが、対象タブで selectedTabId 属性を設定してデフォルトのタブを変更できます。
タブセットの外観を変更するには、variant 属性を使用します。variant 属性は、default、scoped、または vertical に設定できます。variant が default の場合、有効なタブに下線が表示されます。タブセットのスタイル設定が scoped の場合、コンテナが閉じた状態で表示され、有効なタブの境界線が強調表示されます。垂直方向 (vertical) のタブセットでは、水平方向ではなく垂直方向にタブを表示する、スコープ設定された (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>クライアント側コントローラで、コンポーネントとイベントをヘルパーに渡します。
1({
2 handleActive: function (cmp, event, helper) {
3 helper.lazyLoadTabs(cmp, event);
4 }
5})クライアント側ヘルパーは、選択されたタブを識別し、$A.createComponent() を使用して、コンテンツを追加します。
1({
2 lazyLoadTabs: 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})タブの動的な作成
動的にタブを作成するには、$A.createComponent() を使用します。次の例では、ボタンがクリックされたときに新しいタブを作成し、moretabs ファセットを使用して新しいタブを保持します。
1<aura:component>
2 <aura:attribute name="moretabs" type="Aura.Component[]"/>
3 <lightning:tabset variant="scoped">
4 <lightning:tab label="Item One">
5 Some content here
6 </lightning:tab>
7 {!v.moretabs}
8 </lightning:tabset>
9 <!-- Click button to create a new tab -->
10 <lightning:button label="Add tab" onclick="{!c.addTab}"/>クライアント側コントローラは、onactive イベントハンドラを追加し、新しいタブがクリックされたときにタブコンテンツを作成します。
1({
2 addTab: function(component, event) {
3 $A.createComponent("lightning:tab", {
4 "label": "New Tab",
5 "id": "new",
6 "onactive": component.getReference("c.addContent")
7 }, function (newTab, status, error) {
8 if (status === "SUCCESS") {
9 var body = component.get("v.moretabs");
10 component.set("v.moretabs", newTab);
11 } else {
12 throw new Error(error);
13 }
14 });
15 },
16 addContent : function(component, event) {
17 var tab = event.getSource();
18 switch (tab.get('v.id')){
19 case 'new':
20 // Display a badge in the tab content.
21 // You can replace lightning:badge with a custom component.
22 $A.createComponent("lightning:badge", {
23 "label": "NEW"
24 }, function (newContent, status, error) {
25 if (status === "SUCCESS") {
26 tab.set('v.body', newContent);
27 } else {
28 throw new Error(error);
29 }
30 });
31 break;
32 }
33 }
34})または、aura:if を使用して、条件に応じたタブを表示することもできます。この例では、初期化時にタブを作成しますが、対象の条件が満たされるまで非表示にします。 cmp.set('v.displayTab', !cmp.get('v.displayTab')); を使用すると、非表示のタブを表示できます。
1<aura:component>
2 <aura:attribute name="displayTab" type="Boolean" default="false" />
3 <lightning:tabset>
4 <aura:if isTrue="{! v.displayTab }">
5 <lightning:tab label="My Hidden Tab">
6 Your content here
7 </lightning:tab>
8 </aura:if>
9 <!-- Your other lightning:tab components here -->
10 </lightning:tabset>
11</aura:component>プログラムによってタブを選択するには、lightning:tab の id 属性の変更ハンドラを追加します。この例では、tabId は変更ハンドラによって監視されます。そして変更ハンドラは、handleChange コントローラアクションを起動して selectedTabId 属性を更新します。
1<aura:component>
2 <aura:attribute name="tabId" type="String" default="2"/>
3 <aura:handler name="change" value="{!v.tabId}" action="{!c.handleChange}"/>
4 <lightning:tabset aura:id="tabs" selectedTabId="{!v.tabId}">
5 <lightning:tab label="Item One" id="1">
6 Your content here
7 </lightning:tab>
8 <lightning:tab label="Item Two" id="2">
9 Your content here
10 </lightning:tab>
11 <lightning:tab label="Item Three" id="3">
12 Your content here
13 </lightning:tab>
14 </lightning:tabset>
15 <lightning:button label="Toggle Tab" onclick="{!c.handleClick}" />
16</aura:component>タブ ID を新しい値に更新した後、selectedTabId の値を更新することによって対応するタブを表示します。
1({
2 handleClick: function(cmp) {
3 cmp.set("v.tabId", "3");
4 },
5 handleChange: function(cmp) {
6 //Display content on the Item Three tab
7 var selected = cmp.get("v.tabId");
8 cmp.find("tabs").set("v.selectedTabId", selected);
9 }
10})使用上の考慮事項
読み込んだタブ数が多くてビューポートの幅に収まらない場合は、タブセットがオーバーフローしたタブのナビゲーションボタンを設定します。
このコンポーネントでは、実行中に本文が作成されます。初期化中にはコンポーネントを参照できません。代わりに、コンポーネント属性とバインドする値を使用して、コンテンツを設定できます。
たとえば、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 </iteration>
9 </lightning:select>
10 </lightning:tab>
11 </lightning:tabset>
12</aura:component>属性
| 属性名 | 属性型 | 説明 | 必須項目 |
|---|---|---|---|
| body | ComponentDefRef[] | コンポーネントのボディ。1 つ以上の lightning:tab コンポーネントを含めることができます。 | |
| class | String | コンポーネントの基本クラスに加え、外部要素の CSS クラス。 | |
| title | String | マウスポインタが要素に重ねられたときにツールチップテキストを表示します。 | |
| variant | String | variant は、タブセットの外観を変更します。variant の有効な値は、default、scoped、vertical です。 | |
| selectedTabId | String | デフォルトで開く特定のタブを設定できます。この属性が使用されていない場合、デフォルトで最初のタブが開きます。 | |
| onselect | Action | タブがクリックされたときに実行されるアクション。 |