メニュー

メニューは、表示を制御するトリガを含むドロップダウンリストです。トリガとメニュー項目のリストを指定する必要があります。ドロップダウンメニューとそのメニュー項目は、デフォルトでは非表示になっています。この設定を変更するには、ui:menuList コンポーネントの visible 属性を true に設定します。メニュー項目は、ui:menuTriggerLink コンポーネントをクリックしたときにのみ表示されます。

次のコード例では、複数の項目が含まれるメニューを作成します。

1<ui:menu>
2    <ui:menuTriggerLink aura:id="trigger" label="Opportunity Status"/>
3        <ui:menuList class="actionMenu" aura:id="actionMenu">
4              <ui:actionMenuItem aura:id="item2" label="Open" click="{!c.updateTriggerLabel}"/>
5              <ui:actionMenuItem aura:id="item3" label="Closed" click="{!c.updateTriggerLabel}"/>
6              <ui:actionMenuItem aura:id="item4" label="Closed Won" click="{!c.updateTriggerLabel}"/>
7        </ui:menuList>
8</ui:menu>

メニューごとにその目的は異なります。目的の動作に対して正しいメニューを使用してください。メニューには次の 3 種類があります。

アクション

印刷、新規作成、保存などのアクションを作成する項目の ui:actionMenuItem を使用します。

ラジオボタン

複数の項目のリストから 1 つのみを選択する場合は、ui:radioMenuItem を使用します。

チェックボックススタイル

複数の項目のリストから複数の項目を選択できる場合は、ui:checkboxMenuItem を使用します。チェックボックスは、1 つの項目のオン/オフを切り替える場合にも使用できます。