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

lightning:verticalNavigation

縦方向のリンクのリストを表します。このリンクにより、ユーザは別のページまたは現在のページの別の部分に移動できます。このコンポーネントでは、API バージョン 41.0 以降が必要です。

lightning:verticalNavigation コンポーネントは、1 レベルのみの深さを持つリンクのリストを表し、折りたたまれるおよび展開されるオーバーフローセクションをサポートします。オーバーフローセクションは、lightning:verticalNavigationOverflow を使用して作成される必要があり、ビューポートに基づいて自動的に調整されることはありません。

このコンポーネントは、Lightning Design System の垂直ナビゲーションからスタイル設定を継承します。

lightning:verticalNavigation は、次のサブコンポーネントと共に使用されます。

lightning:verticalNavigationSection
lightning:verticalNavigationItem
lightning:verticalNavigationOverflow
lightning:verticalNavigationItemBadge
lightning:verticalNavigationItemIcon

この例では、基本的な垂��ナビゲーションメニューを作成します。

1<aura:component>
2    <lightning:verticalNavigation>
3            <lightning:verticalNavigationSection label="Reports">
4                <lightning:verticalNavigationItem label="Recent" name="recent" />
5                <lightning:verticalNavigationItem label="Created by Me" name="created" />
6                <lightning:verticalNavigationItem label="Private Reports" name="private" />
7                <lightning:verticalNavigationItem label="Public Reports" name="public" />
8                <lightning:verticalNavigationItem label="All Reports" name="all" />
9            </lightning:verticalNavigationSection>
10        </lightning:verticalNavigation>
11</aura:component>

有効なナビゲーション項目を定義するには、lightning:verticalNavigation の selectedItem="itemName" を使用します。ここで、itemName は、強調表示する lightning:verticalNavigationItem コンポーネントの name と一致します。

この例では、強調表示された項目とオーバーフローセクションを持つナビゲーションメニューを作成します。

1<aura:component>
2    <lightning:verticalNavigation selectedItem="recent">
3        <lightning:verticalNavigationSection label="Reports">
4            <lightning:verticalNavigationItem label="Recent" name="recent" />
5            <lightning:verticalNavigationItem label="All Reports" name="all" />
6        </lightning:verticalNavigationSection>
7        <lightning:verticalNavigationOverflow>
8            <lightning:verticalNavigationItem label="Regional Sales East" name="east" />
9            <lightning:verticalNavigationItem label="Regional Sales West" name="west" />
10        </lightning:verticalNavigationOverflow>
11    </lightning:verticalNavigation>
12</aura:component>

ナビゲーションメニューの動的な作成

JavaScript を使用してナビゲーションメニューを作成するには、サブコンポーネントを定義する、キー - 値のペアの対応付けを渡します。次に、コンポーネントの初期化時にナビゲーションメニューを作成する例を示します。

1<aura:component>
2    <aura:attribute name="navigationData" type="Object" description="The list of sections and their items." />
3    <aura:handler name="init" value="{! this }" action="{! c.init }" />
4    <lightning:verticalNavigation>
5            <aura:iteration items="{! v.navigationData }" var="section">
6                <lightning:verticalNavigationSection label="{! section.label }">
7                    <aura:iteration items="{! section.items }" var="item">
8                        <aura:if isTrue="{! !empty(item.icon) }">
9                            <lightning:verticalNavigationItemIcon
10                                label="{! item.label }"
11                                name="{! item.name }"
12                                iconName="{! item.icon }" />
13                            <aura:set attribute="else">
14                                <lightning:verticalNavigationItem
15                                    label="{! item.label }"
16                                    name="{! item.name }" />
17                            </aura:set>
18                        </aura:if>
19                    </aura:iteration>
20                </lightning:verticalNavigationSection>
21            </aura:iteration>
22        </lightning:verticalNavigation> 
23</aura:component>

クライアント側のコントローラで、2 つのセクションを作成し、各セクションに 2 つのナビゲーション項目を含めます。

1({
2    init: function (component) {
3        var sections = [
4          {
5            label: "Reports",
6            items: [
7              {
8                label: "Created by Me",
9                name: "default_created"
10              },
11              {
12                label: "Public Reports",
13                name: "default_public"
14              }
15            ]
16          },
17          {
18            label: "Dashboards",
19            items: [
20              {
21                label: "Favorites",
22                name: "default_favorites",
23                icon: "utility:favorite"
24              },
25              {
26                label: "Most Popular",
27                name: "custom_mostpopular"
28              }
29            ]
30          }
31        ];
32        component.set('v.navigationData', sections);
33    }
34})

使用上の考慮事項

2 レベル以上の深さを持つナビゲーションメニューを作成する場合、代わりに lightning:tree を使用することを考慮してください。

ナビゲーションメニューは画面の幅全体を使用します。CSS を使用して幅を指定できます。

1.THIS {
2    width: 320px;
3}

アクセシビリティ

Tab キーと Shift+Tab キーを使用して、メニューを上下に移動します。オーバーフローセクションを展開するまたは折りたたむには、Enter キーまたはスペースバーを押します。

属性

属性名	属性型	説明
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`ariaLabel`	String	ナビゲーションコンポーネントの ARIA 表示ラベル。
`class`	String	コンポーネントの基本クラスに加え、外部要素の CSS クラス。
`compact`	Boolean	ナビゲーション項目間の間隔を小さくするには、true を指定します。この値のデフォルトは false です。
`onbeforeselect`	Action	項目が選択される前に起動されるアクション。イベントパラメータには、選択された項目の「name」が含まれます。onselect ハンドラを実行しないようにするには、onbeforeselect ハンドラ内で event.preventDefault() をコールします。
`onselect`	Action	項目が選択されたときに起動されるアクション。イベントパラメータには、選択された項目の「name」が含まれます。
`selectedItem`	String	有効にするナビゲーション項目の名前。
`shaded`	Boolean	網掛け表示の背景上に垂直ナビゲーションを配置する場合は true を指定します。この値のデフォルトは false です。
`title`	String	マウスポインタが要素に重ねられたときにツールチップテキストを表示します。

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

lightning:verticalNavigation

属性