Lightning コンポーネント開発者ガイド
jui:outputCheckbox
チェックボックスをオンまたはオフの状態で表示します。
ui:outputCheckbox コンポーネントは、HTML img タグとして表示されるチェックボックスを表します。このコンポーネントを ui:inputCheckbox と共に使用すると、ユーザがチェックボックスをオンまたはオフにできます。チェックボックスをオンまたはオフにするには、value 属性を true または false に設定します。チェックボックスを表示する場合、属性値を使用して ui:outputCheckbox コンポーネントにバインドできます。
1<aura:attribute name="myBool" type="Boolean" default="true"/>
2<ui:outputCheckbox value="{!v.myBool}"/>前の例によって次の HTML が表示されます。
1<img class="checked uiImage uiOutputCheckbox" alt="checkbox checked" src="path/to/checkbox">次の例は、ui:inputCheckbox コンポーネントを使用する方法を示します。
1<aura:component>
2 <aura:attribute name="myBool" type="Boolean" default="true"/>
3 <ui:inputCheckbox aura:id="checkbox" label="Select?" change="{!c.onCheck}"/>
4 <p>Selected:</p>
5 <p><ui:outputText class="result" aura:id="checkResult" value="false" /></p>
6 <p>The following checkbox uses a component attribute to bind its value.</p>
7 <ui:outputCheckbox aura:id="output" value="{!v.myBool}"/>
8</aura:component>1({
2 onCheck: function(cmp, evt) {
3 var checkCmp = cmp.find("checkbox");
4 resultCmp = cmp.find("checkResult");
5 resultCmp.set("v.value", ""+checkCmp.get("v.value"));
6
7 }
8})属性
| 属性名 | 属性型 | 説明 | 必須項目 |
|---|---|---|---|
| altChecked | String | チェックボックスがオンの場合の代替テキストによる説明。デフォルト値は「True」です。 | |
| altUnchecked | String | チェックボックスがオフの場合の代替テキストによる説明。デフォルト値は「False」です。 | |
| body | Component[] | コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。 | |
| class | String | コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。 | |
| value | Boolean | チェックボックスをオンにするかどうかを指定します。 | はい |
イベント
| イベント名 | イベントタイプ | 説明 |
|---|---|---|
| dblclick | COMPONENT | ユーザがコンポーネントをダブルクリックすると起動されるイベント。 |
| mouseover | COMPONENT | ユーザがコンポーネントにマウスポインタを重ねると起動されるイベント。 |
| mouseout | COMPONENT | ユーザがコンポーネントからマウスポインタを移動すると起動されるイベント。 |
| mouseup | COMPONENT | ユーザがコンポーネント上でマウスボタンを放すと起動されるイベント。 |
| mousemove | COMPONENT | ユーザがコンポーネントにマウスポインタを重ねると起動されるイベント。 |
| click | COMPONENT | ユーザがコンポーネントをクリックすると起動されるイベント。 |
| mousedown | COMPONENT | ユーザがコンポーネント上でマウスボタンをクリックすると起動されるイベント。 |