この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。
英語に切り替える

Lightning コンポーネント開発者ガイド

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

数値項目

数値項目には、数値を含めることができ��す。数値項目では、クライアント側の書式設定、ローカライズ、共通のキーワードイベントとマウスイベントがサポートされます。

ui:inputNumber コンポーネントの出力を表示するには、ui:outputNumber を使用します。

数値項目の使用

次の例に、10 の値を表示する数値項目を示します。

1swfobject.registerObject("clippy.codeblock-0", "9");<aura:attribute name="num" type="integer" default="10"/>
2<ui:inputNumber aura:id="num" label="Age" value="{!v.num}"/>

前の例の結果、次の HTML になります。

1swfobject.registerObject("clippy.codeblock-1", "9");<div class="uiInput uiInputText uiInputNumber">
2  <label class="uiLabel-left uiLabel">
3    <span>Enter age</span>
4  </label>
5  <input aria-describedby placeholder type="text" 
6         class="uiInput uiInputText uiInputNumber">
7</div>

有効な数値を返す

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");<ui:label label="Cost" for="costField"/>
2<ui:inputNumber aura:id="costField" format="#,##0,000.00#" value="10000"/>

数値項目のスタイル設定

次の例は、myStyle セレクタを使用して ui:inputNumber コンポーネントにスタイルを設定します。

1swfobject.registerObject("clippy.codeblock-5", "9");<!-- Component markup -->
2<ui:inputNumber class="myStyle" label="Amount" placeholder="0" />
3
4/* CSS */
5.THIS .myStyle { 
6  border: 1px solid #dce4ec;
7  border-radius: 4px;
8}