Lightning コミュニティ開発者ガイド
jステップ 4: 縦方向ナビゲーションメニューを作成する
サイドバーに縦方向ナビゲーションメニューを追加するには、抽象forceCommunity:navigationMenuBase コンポーネントを拡張する新しいコンポーネントを verticalNav という名前で作成します。
1<aura:component extends="forceCommunity:navigationMenuBase">
2
3</aura:component>このコンポーネントには、コミュニティの [ナビゲーションメニュー] コンポーネントで定義されるナビゲーションメニュー項目へのアクセス権が自動的に付与されます。実際にその様子を見るために、ナビゲーションメニュー項目の順序なしリストを作成します。
1<aura:component extends="forceCommunity:navigationMenuBase">
2 <ul>
3 <aura:iteration items="{!v.menuItems}" var="item">
4 <li>{!item.label}</li>
5 </aura:iteration>
6 </ul>
7</aura:component>このシンプルな順序なしリストは、拡張抽象コンポーネントで定義されている menuItems の配列を反復し、配列の各エントリに対して <li> を出力します。
コンポーネントをテストするため、condensedThemeLayout マークアップで、ナビゲーションのプレースホルダコメントがある 3 番目の列にコンポーネントを追加します。
1<c:verticalNav></c:verticalNav>エクスペリエンスビルダーを更新すると、メニュー項目が箇条書きになった縦方向のナビゲーションメニューが表示されます。コミュニティのデフォルトナビゲーションメニューと同じデータセットを使用しています。この例では、縦方向のナビゲーションメニューをトピックのナビゲーションには使用しません。項目を削除するには、 領域の [ナビゲーションメニュー] ボタンをクリックして、ナビゲーションからトピックを削除します。
verticalNav メニューに戻って整理しましょう。次は完成したコンポーネントのコードです。
1<aura:component extends="forceCommunity:navigationMenuBase">
2 <div class="slds-grid slds-grid--vertical slds-navigation-list--vertical">
3 <ul onclick="{!c.onClick}">
4 <aura:iteration items="{!v.menuItems}" var="item">
5 <li class="{!item.active ? 'slds-is-active' : ''}">
6 <a href="javascript:void(0);" data-menu-item-id="{!item.id}" class="slds-navigation-list--vertical__action slds-text-link--reset">
7 {!item.label}
8 </a>
9 </li>
10 </aura:iteration>
11 </ul>
12 </div>
13</aura:component>この例では、Aura 式構文を利用して便利な処理を行っています。リスト項目が有効であるかどうかに応じて、slds-is-active クラスを条件的にリスト項目に追加できます。また、data-menu-item-id を項目の一意の ID として設定します。この ID は、後で対応する項目への移動に使用できます。このように、各リスト項目にクリックリスナを 1 つずつ追加するのではなく、リスト全体で必要なクリックリスナは 1 つだけで済みます。
コンポーネントのコントローラメソッドにクリックハンドラを追加します。HTML 要素のデータ属性にアクセスするための (項目の ID を取得できるようにする) JavaScript 構文に注意してください。
1({
2 onClick : function(component, event, helper) {
3 var id = event.target.dataset.menuItemId;
4 if (id) {
5 component.getSuper().navigate(id);
6 }
7 }
8})次の CSS ルールをテーマレイアウトコンポーネントに追加して、不要な余白を削除し、メインコンテンツの幅を設定します。
1.THIS .slds-col .ui-widget {
2 margin: 16px 0;
3}
4
5.THIS .slds-col.content {
6 width: 1140px;
7}