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

lightning:button

ボタン要素を表します。

lightning:button コンポーネントは、コントローラでアクションを実行するボタン要素を表します。ボタンをクリックすると、onclick に対して設定されたクライアント側コントローラのメソッドがトリガされます。ボタンは表示ラベルのみ、表示ラベルとアイコン、ボディのみ、ボディとアイコンのいずれかにすることができます。アイコンのみのボタンが必要な場合は、lightning:buttonIcon を使用します。

追加のスタイルを適用するには、variant および class 属性を使用します。

Lightning Design System ユーティリティアイコンカテゴリでは、lightning:button で表示ラベルテキストと一緒に使用できる約 200 個のユーティリティアイコンを提供しています。SLDS では複数のアイコンカテゴリが提供されていますが、このコンポーネントで使用できるのはユーティリティカテゴリのみです。

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

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

次に、ボタンに表示ラベルを表示するブランドバリエーションが設定されたボタンを作成する例を示します。

次にもう 1 つ、ボタンに表示ラベルとアイコンを表示するブランドバリエーションが設定されたボタンを作成する例を示します。

クリックされたボタンは event.getSource() を使用して取得できます。たとえば、ボタンの表示ラベルを取得するには、event.getSource().get("v.label") を使用します。

アクセシビリティ

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

メソッド

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

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

属性

属性名	属性型	説明
`accesskey`	String	要素の有効化またはフォーカス設定のためのショートカットキーを指定します。
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントの基本クラスに加え、外部要素の CSS クラス。
`disabled`	Boolean	このボタンを無効な状態で表示するかどうかを指定します。無効なボタンをクリックすることはできません。この値のデフォルトは false です。
`iconName`	String	アイコンの Lightning Design System 名。名前は、形式「utility:down」で記述します。「utility」はカテゴリ、「down」は表示する特定のアイコンです。
`iconPosition`	String	ボディに対するアイコンの位置を記述します。left または right を選択できます。この値のデフォルトは left です。
`label`	String	ボタン内に表示するテキスト。
`name`	String	ボタン要素の名前。この値は省略可能であり、コールバック内でボタンを識別するために使用できます。
`onblur`	Action	要素がフォーカスを解放したときにトリガされるアクション。
`onclick`	Action	ボタンがクリックされたときにトリガされるアクション。
`onfocus`	Action	要素にフォーカスが設定されたときにトリガされるアクション。
`tabindex`	Integer	要素のタブ順序を指定します (タブボタンがナビゲーションに使用される場合)。
`title`	String	マウスが要素に重ねられたときにツールチップテキストを表示します。
`type`	String	ボタンの種類を指定します。有効な値は、button、reset、submit です。この値のデフォルトは button です。
`value`	String	ボタン要素の値。この値は省略可能であり、フォームの送信時に使用できます。
`variant`	String	バリエーションによってボタンの外観が変更されます。有効なバリエーションとして、base、neutral、brand、destructive、inverse、success があります。この値のデフォルトは neutral です。

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

lightning:button

属性