Lightning コンポーネント開発者ガイド
jラジオボタン
ラジオボタンは、クリックおよびアクションの実行が可能であり、グループとして表示された場合は 1 つのみ選択できます。ラジオボタンは、動作とイベントを ui:input から継承する ui:inputRadio を使用して作成できます。value および disabled 属性は、ラジオボタンの状態を制御し、click や change などのイベントはその動作を決定します。イベントは、ラジオボタンごとに別個に使用する必要があります。
メニューでラジオボタンを使用する場合は、代わりに ui:radioMenuItem を使用します。
ラジオボタンを設定するいくつかの基本的な方法を次に示します。
- 選択済み
- ラジオボタンを選択するには、value="true" に設定します。
1swfobject.registerObject("clippy.codeblock-0", "9"); 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17<ui:inputRadio value="true" label="Select?"/> - オフの状態
-
1swfobject.registerObject("clippy.codeblock-1", "9"); 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17<ui:inputRadio label="Select" disabled="true"/>
前の例の結果、次の HTML になります。
1<label class="uiLabel-left uiLabel" for="globalId"><span>Select</span></label>
2<input type="radio" id="globalId" class="uiInput uiInputRadio">属性を使用した表示ラベルの指定
属性を使用して、表示ラベルの値を初期化することもできます。次の例では、属性を使用してラジオボタンの表示ラベルを入力し、ラジオボタンが選択または選択解除されたときにクライアント側のコントローラアクションに結び付けます。
1<!--docsample:labelsAttribute-->
2<aura:component>
3 <aura:attribute name="stages" type="String[]" default="Any,Open,Closed,Closed,Closed Won"/>
4 <aura:iteration items="{!v.stages}" var="stage">
5 <ui:inputRadio label="{!stage}" change="{!c.doSomething}"/>
6 </aura:iteration>
7</aura:component>イベントの操作
ui:inputRadio の共通イベントには、click イベントと change イベントがあります。たとえば、click="{!c.showItem}" では、関数名 showItem を使用してクライアント側のコントローラアクションがコールされます。
次のコードは、ラジオボタンがクリックされたときにコンポーネントの CSS クラスを更新します。
1swfobject.registerObject("clippy.codeblock-4", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--The radio button-->
18 <ui:inputRadio click="{!c.showItem}" label="Show Item"/>
19 1swfobject.registerObject("clippy.codeblock-5", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17/* The controller action */
18showItem : function(cmp, event) {
19 var elem = cmp.find('myCmp');
20 $A.util.toggleClass(elem, "cssClass");
21}