lightning:buttonIcon

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(): フォーカスを要素に設定します。