Lightning コンポーネント開発者ガイド
jボタン
ボタンは、クリックおよびアクションの実行が可能であり、テキスト表示ラベル、画像、またはその両方を設定できます。ボタンは次の 3 通りの方法で作成できます。
- テキストのみのボタン
1<ui:button label="Find" /> - 画像のみのボタン
1<!-- Component markup --> 2<ui:button label="Find" labelClass="assistiveText" class="img" /> 3 4/** CSS **/ 5THIS.uiButton.img { 6 background: url(/path/to/img) no-repeat; 7 width:50px; 8 height:25px; 9}assistiveText クラスは、ビューに表示ラベルは表示されませんが、支援技術には使用できます。
- テキストと画像を含むボタン
1<!-- Component markup --> 2<ui:button label="Find" /> 3 4/** CSS **/ 5THIS.uiButton { 6 background: url(/path/to/img) no-repeat; 7}
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 を使用して、クライアント側のコントローラアクションをコールします。
1<aura:component>
2 <ui:inputText aura:id="name" label="Enter Name:" placeholder="Your Name" />
3 <ui:button aura:id="button" label="Click me" press="{!c.getInput}"/>
4 <ui:outputText aura:id="outName" value="" class="text"/>
5</aura:component>1/* Client-side controller */
2({
3 getInput : function(cmp, evt) {
4 var myName = cmp.find("name").get("v.value");
5 var myText = cmp.find("outName");
6 var greet = "Hi, " + myName;
7 myText.set("v.value", greet);
8 }ボタンのスタイル設定
ui:button コンポーネントは、通常の CSS スタイル設定を使用してカスタマイズできます。コンポーネントの CSS リソースで、次のクラスセレクタを追加します。
1.THIS.uiButton {
2 margin-left: 20px;
3}ボタンコンポーネントが最上位レベルの要素である場合、.THIS.uiButton セレクタでスペースは追加されません。
アプリケーションですべての ui:button コンポーネントのスタイル設定を上書きするには、アプリケーションの CSS リソースで次のクラスセレクタを追加します。
1.THIS .uiButton {
2 margin-left: 20px;
3}