Lightning コンポーネント開発者ガイド
jチェックボックス
チェックボックスは、クリックおよびアクションの実行が可能であり、複数の選択肢のグループとして表示できます。チェックボックスは、動作とイベントを ui:input から継承する ui:inputCheckbox を使用して作成できます。value および disabled 属性は、チェックボックスの状態を制御し、click や change などのイベントはその動作を決定します。イベントは、チェックボックスごとに別個に使用する必要があります。
次に、チェックボックスを設定する基本的な方法をいくつか示します。
- オン
- チェックボックスをオンにするには、value="true" を設定します。次の例は、チェックボックスの初期値を設定します。
1<aura:attribute name="check" type="Boolean" default="true"/> 2<ui:inputcheckbox value="{!v.check}"/> - オフの状態
-
1<ui:inputCheckbox disabled="true" label="Select" />
前の例の結果、次の HTML になります。
1<div class="uiInput uiInputCheckbox uiInput--default uiInput--checkbox">
2<label class="uiLabel-left form-element__label uiLabel" for="globalId"><span>Select</span></label>
3<input disabled="disabled" type="checkbox id="globalId">イベントの操作
ui:inputCheckbox の共通イベントには、click イベントと change イベントがあります。たとえば、click="{!c.done}" では、関数名 done を使用してクライアント側のコントローラがコールされます。
次のコードは、チェックボックス項目にチェックマークを入れます。
1<!--The checkbox-->
2 <ui:inputCheckbox label="Cross this out" click="{!c.crossout}" class="line" />
3
4 /*The controller action*/
5 crossout : function(cmp, event){
6 var cmpSource = event.getSource();
7 $A.util.toggleClass(cmpSource, "done");
8 }チェックボックスのスタイル設定
ui:inputCheckbox コンポーネントは、通常の CSS スタイル設定を使用してカスタマイズできます。この例では、次の画像を含むチェックボックスを示します。
1<ui:inputCheckbox labelClass="check"
2 label="Select?" value="true" />次の CSS スタイルは、指定された画像を持つデフォルトのチェックボックスに置き換わります。
1.THIS input[type="checkbox"] {
2 display: none;
3}
4
5.THIS .check span {
6 margin: 20px;
7}
8
9.THIS input[type="checkbox"]+label {
10 display: inline-block;
11 width: 20px;
12 height: 20px;
13 vertical-align: middle;
14 background: url('images/checkbox.png') top left;
15 cursor: pointer;
16}
17
18.THIS input[type="checkbox"]:checked+label {
19 background:url('images/checkbox.png') bottom left;
20 }