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

lightning:buttonIcon

アイコンのみの HTML ボタン。

lightning:buttonIcon コンポーネントは、コントローラでアクションを実行するアイコンのみのボタン要素を表します。ボタンをクリックすると、onclick に対して設定されたクライアント側コントローラのメソッドがトリガされます。

variant、size、class、iconClass の各属性を組み合わせて、ボタンやアイコンのスタイルをカスタマイズできます。ボタンコンテナのスタイル設定をカスタマイズするには、class 属性を使用します。ベアバリエーションでは、size クラスがアイコン自体に適用されます。ノンベアバリエーションでは、size クラスがボタンに適用されます。アイコン要素のスタイル設定をカスタマイズするには、iconClass 属性を使用します。次の例では、ベアバリエーションおよびカスタムアイコンというスタイル設定のアイコンのみのボタンを作成します。

1<!-- Bare variant with custom "dark" CSS class added to icon svg element -->
2<lightning:buttonIcon iconName="utility:settings" variant="bare" alternativeText="Settings" iconClass="dark"/>

Lightning Design System ユーティリティアイコンカテゴリでは、lightning:buttonIcon で使用できる約 200 個のユーティリティアイコンを提供しています。Lightning Design System では複数のアイコンカテゴリが提供されていますが、lightning:buttonIcon で使用できるのはユーティリティカテゴリのみです。

ユーティリティアイコンを表示するには、https://lightningdesignsystem.com/icons/#utilityにアクセスしてください。

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

次に例を示します。

1<aura:component>
2    <lightning:buttonIcon iconName="utility:close" variant="bare" onclick="{! c.handleClick }" alternativeText="Close window." />
3</aura:component>

使用上の考慮事項

スタンドアロンアプリケーションで lightning:buttonIcon を使用する場合、アイコンリソースを正しく解決するために force:slds を拡張します。

1<aura:application extends="force:slds">
2    <lightning:buttonIcon iconName="utility:close" alternativeText="Close"/>
3</aura:application>

アクセシビリティ

アイコンを説明するには、alternativeText 属性を使用します。説明では、アイコンの外観 (「ペーパークリップ」) ではなく、ボタンをクリックしたときに何が起こるか (「ファイルのアップロード」など) を示す必要があります。

メソッド

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

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

属性

属性名	属性型	説明	必須項目?
`accesskey`	String	要素の有効化またはフォーカス設定のためのショートカットキーを指定します。
`alternativeText`	String	アイコンを説明するために使用する代替テキスト。このテキストでは、アイコンの外観 (「ペーパークリップ」) ではなく、ボタンをクリックしたときに何が起こるか (「ファイルのアップロード」など) を説明する必要があります。	はい
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントの基本クラスに加え、外部要素の CSS クラス。
`disabled`	Boolean	このボタンを無効な状態で表示するかどうかを指定します。無効なボタンをクリックすることはできません。この値のデフォルトは false です。
`iconClass`	String	含まれるアイコン要素に適用されるクラス。
`iconName`	String	アイコンの Lightning Design System 名。名前は、形式「\utility:down\」で記述します。「utility」はカテゴリ、「down」は表示する特定のアイコンです。注意: このコンポーネントで使用できるのはユーティリティアイコンのみです。	はい
`name`	String	ボタン要素の名前。この値は省略可能であり、コールバック内でボタンを識別するために使用できます。
`onblur`	Action	要素がフォーカスを解放したときにトリガされるアクション。
`onclick`	Action	ボタンがクリックされたときに実行されるアクション。
`onfocus`	Action	要素にフォーカスが設定されたときにトリガされるアクション。
`size`	String	buttonIcon のサイズ。ベアバリエーションのオプションは、x-small、small、medium、large です。ノンベアバリエーションのオプションは、xx-small、x-small、small、medium です。この値のデフォルトは medium です。
`tabindex`	Integer	要素のタブ順序を指定します (タブボタンがナビゲーションに使用される場合)。
`title`	String	マウスが要素に重ねられたときにツールチップテキストを表示します。
`type`	String	ボタンの種類を指定します。有効な値は、button、reset、submit です。この値のデフォルトは button です。
`value`	String	ボタン要素の値。この値は省略可能であり、フォームの送信時に使用できます。
`variant`	String	バリエーションによって buttonIcon の外観が変更されます。有効なバリエーションとして、bare、container、border、border-filled、bare-inverse、border-inverse があります。この値のデフォルトは border です。

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

lightning:buttonIcon

属性