この文章は 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

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

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

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

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

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

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

使用上の考慮事項

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

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

アクセシビリティ

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

属性

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

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

lightning:verticalNavigation

属性