Lightning コンポーネント開発者ガイド
j数値項目
数値項目には、数値を含めることができます。数値項目では、クライアント側の書式設定、ローカライズ、共通のキーワードイベントとマウスイベントがサポートされます。
このような項目コンポーネントから出力を表示する場合は、それぞれの ui:output コンポーネントを使用します。たとえば、ui:inputNumber コンポーネントの出力を表示するには、ui:outputNumber を使用します。
| 型 | 関連コンポーネント | 説明 |
|---|---|---|
| 数値 | ui:inputNumber | 数値を入力するための入力項目 |
| ui:outputNumber | 数値を表示します | |
| 通貨 | ui:inputCurrency | 通貨を入力するための入力項目 |
| ui:outputCurrency | 通貨を表示します |
数値項目の使用
次の例に、10 の値を表示する数値項目を示します。
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:attribute name="num" type="integer" default="10"/>
18<ui:inputNumber aura:id="num" label="Age" value="{!v.num}"/>前の例の結果、次の HTML になります。
1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<div class="uiInput uiInputText uiInputNumber">
18 <label class="uiLabel-left uiLabel">
19 <span>Enter age</span>
20 </label>
21 <input aria-describedby placeholder type="text"
22 class="uiInput uiInputText uiInputNumber">
23</div>項目値のバインド
{!v.myAttribute.Name} または {!v.myAttribute.namespace__MyField__c} などの式を使用し、Apex コントローラで入力値を保存することで、オブジェクトの項目に項目値をバインドできます。「スタンドアロン Lightning アプリケーションを作成する」の例を参照してください。
有効な数値を返す
ui:inputNumber コンポーネントの値には、有効な数値が予期され、カンマは使用できません。カンマを含めるには、type="String" の代わりに type="Integer" を使用します。
次の例は 100,000 を返します。
1<aura:attribute name="number" type="Integer" default="100,000"/>
2<ui:inputNumber label="Number" value="{!v.number}"/>次の例も 100,000 を返します。
1<aura:attribute name="number" type="String" default="100000"/>
2<ui:inputNumber label="Number" value="{!v.number}"/>数値項目の書式設定とローカライズ
format 属性は、数値入力の形式を決定します。指定されていない場合は、ロケールのデフォルト形式が使用されます。次のコードは、指定された format 属性に基づいて 10,000.00 を表示する、数値項目の基本設定です。
1swfobject.registerObject("clippy.codeblock-4", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<ui:label label="Cost" for="costField"/>
18<ui:inputNumber aura:id="costField" format="#,##0,000.00#" value="10000"/>数値項目のスタイル設定
数値項目および出力の外観のスタイルを設定できます。コンポーネントの CSS ファイルで、対応するクラスセレクタを追加します。次のクラスセレクタは、数値の文字列表示のスタイルを指定します。たとえば、ui:inputCurrency コンポーネントのスタイルを設定するには、.THIS .uiInputCurrency を使用するか、最上位要素の場合は .THIS.uiInputCurrency を使用します。
次の例は、myStyle セレクタを使用して ui:inputNumber コンポーネントにスタイルを設定します。
1swfobject.registerObject("clippy.codeblock-5", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!-- Component markup -->
18<ui:inputNumber class="myStyle" label="Amount" placeholder="0" />
19
20/* CSS */
21.THIS .myStyle {
22 border: 1px solid #dce4ec;
23 border-radius: 4px;
24}