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

メニュー

メニューは、表示を制御するトリガを含むドロップダウンリストです。トリガとメニュー項目のリストを指定する必要があります。ドロップダウンメニューとそのメニュー項目は、デフォルトでは非表示になっています。この設定を変更するには、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>

オブジェクトから項目のリストを表示できます。次の例では、aura:iteration を使用してメニューに取引先責任者名のリストを表示します。

1<aura:component>
2    <aura:attribute name="contacts" type="String[]" default="All,Primary,Secondary"/>
3    <ui:menu>
4        <ui:menuTriggerLink label="Select Contact"/>
5        <ui:menuList>
6            <aura:iteration var="contact" items="{!v.contacts}">
7                <ui:actionMenuItem label="{!contact}"/>
8            </aura:iteration>
9        </ui:menuList>
10    </ui:menu>
11</aura:component>

次のコンポーネントは、ui:menu にネストされています。

コンポーネント	説明
`ui:menu`	表示を制御するトリガを含むドロップダウンリスト
`ui:menuList`	メニュー項目のリスト
`ui:actionMenuItem`	アクションをトリガするメニュー項目
`ui:checkboxMenuItem`	複数選択をサポートしてアクションをトリガできるメニュー項目
`ui:radioMenuItem`	単一選択をサポートしてアクションをトリガできるメニュー項目
`ui:menuItemSeparator`	メニュー項目の視覚的な分離線
`ui:menuItem`	`ui:menuList` コンポーネントに含まれるメニュー項目の抽象かつ拡張可能なコンポーネント
`ui:menuTrigger`	メニューを展開したり折りたたんだりするトリガ
`ui:menuTriggerLink`	ドロップダウンメニューをトリガするリンク。このコンポーネントは `ui:menuTrigger` を拡張します

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

メニュー