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

lightning:buttonMenu

アクションまたは機能のリストのドロップダウンメニューを表します。

lightning:buttonMenu は、クリックされるとユーザがアクセス可能なアクションまたは機能のドロップダウンメニューを表示するボタンを表します。

スタイルをカスタマイズするには、variant、size、または class 属性を使用します。

このコンポーネントは、Lightning Design System のメニューからスタイル設定を継承します。

3 つの項目が含まれるドロップダウンメニューの例を次に示します。

1<lightning:buttonMenu iconName="utility:settings" alternativeText="Settings" onselect="{! c.handleMenuSelect }">
2    <lightning:menuItem label="Font" value="font" />
3    <lightning:menuItem label="Size" value="size"/>
4    <lightning:menuItem label="Format" value="format" />
5</lightning:buttonMenu>

onselect がトリガされると、そのイベントは value パラメータを持ちます。これは、選択されたメニュー項目の値です。値を参照する方法の例を次に示します。

1handleMenuSelect: function(cmp, event, helper) {
2    var selectedMenuItemValue = event.getParam("value");
3}

lightning:menuItem コンポーネントで checked 属性を使用して、チェックまたはチェック解除可能なメニュー項目を作成し、必要に応じて切り替えることができます。メニュー項目の切り替えを有効にするには、checked 属性の初期値を true または false に設定する必要があります。

他の場所をクリックするとメニューが閉じます。メニュー項目が選択された場合もメニューが閉じて、ボタンにフォーカスが戻されます。

aura:iteration によるメニュー項目の生成

次の例では、初期化中に複数の項目が含まれるボタンメニューを作成します。

1<aura:component>
2    <aura:handler name="init" value="{!this}" action="{!c.createItems}" />
3    <lightning:buttonMenu alternativeText="Action" onselect="{! c.handleMenuSelect }">
4        <aura:iteration var="action" items="{! v.actions }">
5            <lightning:menuItem aura:id="actionMenuItems" label="{! action.label }" value="{! action.value }"/>
6        </aura:iteration>
7    </lightning:buttonMenu>
8</aura:component>

クライアント側のコントローラは、メニュー項目の配列を作成し、actions 属性でその値を設定します。

1({
2    createItems: function (cmp, event) {
3        var items = [
4            { label: "New", value: "new" },
5            { label: "Edit", value: "edit" },
6            { label: "Delete", value: "delete" }
7        ];
8        cmp.set("v.actions", items);
9    }
10})

使用上の考慮事項

このコンポーネントには、ボタンがトリガされた場合に限って作成されるメニュー項目が含まれます。初期化中、またはボタンがトリガされていない場合は、メニュー項目を参照できません。

アクセシビリティ

スクリーンリーダーにボタンが無効化されていることを伝えるには、disabled 属性を true に設定します。

メソッド

このコンポーネントは、次のメソッドをサポートします。

focus(): フォーカスを要素に設定します。

属性

属性名	属性型	説明
`accesskey`	String	要素の有効化またはフォーカス設定のためのショートカットキーを指定します。
`alternativeText`	String	ボタンの補助テキスト。
`body`	ComponentDefRef[]	コンポーネントのボディ。
`class`	String	コンポーネントの基本クラスに加え、外部要素の CSS クラス。
`disabled`	Boolean	true の場合、メニューは無効化されています。メニューを無効化すると、ユーザはメニューを開けなくなります。この値のデフォルトは false です。
`iconName`	String	「utility:down」形式で使用するアイコンの名前。この値のデフォルトは utility:down です。utility:down または utility:chevrondown 以外のアイコンが使用されている場合は、そのアイコンの右側に utility:down アイコンが追加されます。
`iconSize`	String	アイコンのサイズ。オプションは、xx-small、x-small、medium、large のいずれかです。この値のデフォルトは medium です。
`menuAlignment`	String	ボタンを基準とするメニューの位置を決定します。選択可能なオプションは、left、center、right です。この値のデフォルトは left です。
`name`	String	ボタン要素の名前。この値は省略可能であり、コールバック内でボタンを識別するために使用できます。
`onblur`	Action	要素がフォーカスを解放したときにトリガされるアクション。
`onfocus`	Action	要素にフォーカスが設定されたときにトリガされるアクション。
`onselect`	Action	メニュー項目が選択されたときに起動されるアクション。渡されたイベントの「detail.menuItem」プロパティは、選択されたメニュー項目です。
`tabindex`	Integer	要素のタブ順序を指定します (タブボタンがナビゲーションに使用される場合)。
`title`	String	ボタンのツールチップテキスト。
`value`	String	ボタン要素の値。この値は省略可能であり、フォームの送信時に使用できます。
`variant`	String	バリエーションによってボタンの外観が変更されます。有効なバリエーションとして、bare、container、border、border-filled、bare-inverse、border-inverse があります。この値のデフォルトは border です。
`visible`	Boolean	true の場合、メニュー項目が表示されます。この値のデフォルトは false です。

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

lightning:buttonMenu

属性