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

lightning:buttonIcon

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

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

スタイルをカスタマイズするには、variant、size、または class 属性を使用します。buttonIcon の色を変更する場合は、class 属性を使用します。

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

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

次に例を示します。

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

アクセシビリティ

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

メソッド

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

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

属性

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

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

lightning:buttonIcon

属性