ui:button | Lightning コンポーネント開発者ガイド

ui:button コンポーネントは、コントローラで定義されたアクションを実行するボタン要素を表します。ボタンをクリックすると、press イベントに対して設定されたクライアント側コントローラのメソッドがトリガされます。ボタンは、さまざまな方法で作成できます。

テキストのみのボタンに設定されているのは label 属性のみです。

1<ui:button label="Find"/>

画像のみのボタンでは、CSS で label と labelClass の両方の属性を使用します。

1<!-- Component markup -->
2<ui:button label="Find" labelClass="assistiveText" class="img" />
3
4/** CSS **/
5THIS.uiButton.img {
6background: url(/path/to/img) no-repeat;
7width:50px;
8height:25px;
9}

assistiveText クラスは、ビューに表示ラベルは表示されませんが、支援技術には使用できます。画像とテキストの両方を含むボタンを作成するには、label 属性を使用し、ボタンのスタイルを追加します。

1<!-- Component markup -->
2<ui:button label="Find" />
3
4/** CSS **/
5THIS.uiButton {
6background: url(/path/to/img) no-repeat;
7}

テキストと画像を含むボタンの前述のマークアップの結果、次の HTML になります。

1<button class="button uiButton--default uiButton" accesskey type="button">
2<span class="label bBody truncate" dir="ltr">Find</span>
3</button>

次の例に、入力値を表示するボタンを示します。

1<aura:component access="global">
2 <ui:inputText aura:id="name" label="Enter Name:" placeholder="Your Name" />
3 <ui:button aura:id="button" buttonTitle="Click to see what you put into the field" class="button" label="Click me" press="{!c.getInput}"/>
4 <ui:outputText aura:id="outName" value="" class="text"/>
5</aura:component>

1({
2    getInput : function(cmp, evt) {
3        var myName = cmp.find("name").get("v.value");
4        var myText = cmp.find("outName");
5        var greet = "Hi, " + myName;
6        myText.set("v.value", greet);
7    }
8})

属性

属性名	属性型	説明
`accesskey`	String	ボタンにフォーカスを置くキーボードのアクセスキー。ボタンにフォーカスがあるときに Enter キーを押すと、ボタンがクリックされます。
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`buttonTitle`	String	ボタンにマウスポインタを置いたときにツールチップとして表示されるテキスト。
`buttonType`	String	ボタンの種類を指定します。指定可能な値は、reset、submit、または button です。この値のデフォルトは button です。
`class`	String	ボタンに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。
`disabled`	Boolean	このボタンを無効な状態で表示するかどうかを指定します。無効なボタンをクリックすることはできません。デフォルト値は「false」です。
`label`	String	ボタンに表示されるテキスト。表示される HTML 入力要素の value 属性に対応します。
`labelClass`	String	表示ラベルに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。

イベント

イベント名	イベントタイプ	説明
`press`	COMPONENT	ボタンがクリックされたときに起動されるイベント。