Lightning コンポーネント開発者ガイド
jボタン
ボタンは、クリックおよびアクションの実行が可能であり、テキスト表示ラベル、画像、またはその両方を設定できます。ボタンは次の 3 通りの方法で作成できます。
- テキストのみのボタン
1swfobject.registerObject("clippy.codeblock-0", "9"); 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17<ui:button label="Find" /> - 画像のみのボタン
1swfobject.registerObject("clippy.codeblock-1", "9"); 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17<!-- Component markup --> 18<ui:button label="Find" labelClass="assistiveText" class="img" /> 19 20/** CSS **/ 21THIS.uiButton.img { 22 background: url(/path/to/img) no-repeat; 23 width:50px; 24 height:25px; 25}assistiveText クラスは、ビューに表示ラベルは表示されませんが、支援技術には使用できます。
- テキストと画像を含むボタン
1swfobject.registerObject("clippy.codeblock-2", "9"); 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17<!-- Component markup --> 18<ui:button label="Find" /> 19 20/** CSS **/ 21THIS.uiButton { 22 background: url(/path/to/img) no-repeat; 23}
HTML 表示
テキストと画像を含むボタンのマークアップの結果、次の HTML になります。
1<button class="default uiBlock uiButton" accesskey type="button">
2 <span class="label bBody truncate" dir="ltr">Find</span>
3</button>クリックイベントの操作
ui:button コンポーネントの press イベントは、ユーザがボタンをクリックすると起動されます。次の例の press="{!c.getInput}" は、入力テキスト値を出力する関数名 getInput を使用して、クライアント側のコントローラアクションをコールします。
1swfobject.registerObject("clippy.codeblock-4", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component>
18 <ui:inputText aura:id="name" label="Enter Name:" placeholder="Your Name" />
19 <ui:button aura:id="button" label="Click me" press="{!c.getInput}"/>
20 <ui:outputText aura:id="outName" value="" class="text"/>
21</aura:component>1swfobject.registerObject("clippy.codeblock-5", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17/* Client-side controller */
18({
19 getInput : function(cmp, evt) {
20 var myName = cmp.find("name").get("v.value");
21 var myText = cmp.find("outName");
22 var greet = "Hi, " + myName;
23 myText.set("v.value", greet);
24 }ボタンのスタイル設定
ui:button コンポーネントは、通常の CSS スタイル設定を使用してカスタマイズできます。コンポーネントの CSS リソースで、次のクラスセレクタを追加します。
1swfobject.registerObject("clippy.codeblock-6", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.THIS.uiButton {
18 margin-left: 20px;
19}ボタンコンポーネントが最上位レベルの要素である場合、.THIS.uiButton セレクタでスペースは追加されません。
アプリケーションですべての ui:button コンポーネントのスタイル設定を上書きするには、アプリケーションの CSS リソースで次のクラスセレクタを追加します。
1swfobject.registerObject("clippy.codeblock-7", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.THIS .uiButton {
18 margin-left: 20px;
19}