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

lightning:tree

ネストされたツリーを表示します。このコンポーネントでは、API バージョン 41.0 以降が必要です。

lightning:tree コンポーネントは、Web サイトのサイトマップや組織のロール階層など、構造階層を視覚的に表示します。項目はハイパーリンクとして表示され、階層内の項目はネストすることができます。ネストした項目を含む項目は、ブランチとも呼ばれます。

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

ツリーを作成するには、キー - 値のペアの配列を items 属性に渡します。キーは次のとお��です。

disabled (Boolean): ブランチを無効化するかどうかを指定します。無効化されたブランチを展開することはできません。デフォルトは false です。
expanded (Boolean): ブランチを展開するかどうかを指定します。展開されたブランチには、ネストされた項目が視覚的に表示されます。デフォルトは false です。
href (String): リンクの URL。
name (String): クリックされたツリー項目を返す、onselect イベントハンドラの項目の一意の名前。
items (Object): キー - 値のペアの配列としてネストされた項目。
label (String): 必須。ハイパーリンクのタイトルと表示ラベル。

次に、複数レベルのネストを持つツリーの例を示します。

1<aura:component>
2    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
3    <aura:attribute name="items" type="Object"/>
4    <lightning:tree items="{! v.items }" header="Roles"/>
5</aura:component>

ツリーはコンポーネントの初期化中に作成されます。

1({
2    doInit: function (cmp, event, helper) {
3    var items = [{
4            "label": "Western Sales Director",
5            "name": "1",
6            "expanded": true,
7            "items": [{
8                "label": "Western Sales Manager",
9                "name": "2",
10                "expanded": true,
11                "items" :[{
12                    "label": "CA Sales Rep",
13                    "name": "3",
14                    "expanded": true,
15                    "items" : []
16                },{
17                    "label": "OR Sales Rep",
18                    "name": "4",
19                    "expanded": true,
20                    "items" : []
21                }]
22            }]
23        }, {
24            "label": "Eastern Sales Director",
25            "name": "5",
26            "expanded": false,
27            "items": [{
28                "label": "Easter Sales Manager",
29                "name": "6",
30                "expanded": true,
31                "items" :[{
32                    "label": "NY Sales Rep",
33                    "name": "7",
34                    "expanded": true,
35                    "items" : []
36                }, {
37                    "label": "MA Sales Rep",
38                    "name": "8",
39                    "expanded": true,
40                    "items" : []
41                }]
42            }]
43        }];
44        cmp.set('v.items', items);
45    }     
46})

選択された項目の ID を取得するには、onselect 属性を使用してイベントハンドラにバインドします (次の例の handleSelect() を参照)。href 値を持つ項目を選択した場合、select イベントも起動されます。

1({
2    handleSelect: function (cmp, event, helper) {
3        //return name of selected tree item
4        var myName = event.getParam('name');
5        alert("You selected: " + myName);
6    }
7})

ツリーの項目を追加または削除できます。次のようなツリーがあるとします。

1var items = [{
2            label: "Go to Record 1",
3            href: "#record1",
4            items: []
5        },{
6            label: "Go to Record 2",
7            href: "#record2",
8            items: []
9        }, {
10            label: "Go to Record 3",
11            href: "#record3",
12            items: []
13        }];

この例では、ネストされた項目がツリーの最後に追加されます。

1({
2    addItem: function (cmp, event, helper) {
3        var items = cmp.get('v.items');
4        var branch = items.length - 1;
5        var label = 'New item added at ' + branch;
6        var newItem = {
7            label: label,
8            expanded: true,
9            disabled: false,
10            items: []
11        };
12        items[branch].items.push(newItem);
13        cmp.set('v.items', items);
14        alert("Added new item at branch: " + branch);
15    }
16})

項目に href 値を提供した場合、ハイパーリンクに移動する前に onselect イベントハンドラがトリガされます。

アクセシビリティ

キーボードを使用してツリーを操作できます。Tab キーを使用してツリーに移動し、上矢印または下矢印キーを使用してツリー項目にフォーカスを設定します。展開されたブランチを折りたたむには、左矢印キーを押します。ブランチを展開するには、右矢印キーを押します。Enter キーまたはスペースバーを押すと、onclick イベントと同様に、項目のデフォルトアクションが実行されます。

属性

属性名	属性型	説明
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントの基本クラスに加え、外部要素の CSS クラス。
`title`	String	マウスポインタが要素に重ねられたときにツールチップテキストを表示します。
`items`	Object	ツリーを説明する、キー - 値のペアの配列。キーには label、name、disabled、expanded、および items が含まれます。
`header`	String	ツリーのヘッダーとして表示されるテキスト。
`onselect`	Aura.Action	ツリー項目が選択されたときにトリガされるアクション。

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

lightning:tree

属性