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

ui:outputNumber

デフォルトまたは指定形式で数値を表示します。最大 18 桁の整数部をサポートします。

ui:outputNumber コンポーネントは、HTML span タグとして表示される数値出力を表します。このコンポーネントは、数値入力を取り込む ui:inputNumber と共に使用できます。ui:outputNumber は、ブラウザのロケール情報を取得し、それに基づいた 10 進数形式で表示します。数値を表示する場合、属性値を使用して ui:outputNumber コンポーネントにバインドできます。

1<aura:attribute name="myNum" type="Decimal" default="10.10"/>
2<ui:outputNumber value="{!v.myNum}" format=".00"/>

前の例によって次の HTML が表示されます。

1<span class="uiOutputNumber">10.10</span>

次の例は、ui:intputNumber コンポーネントの値を取得し、入力を検証し、ui:outputNumber を使用して値を表示します。

1<aura:component> 
2 <ui:inputNumber aura:id="inputCmp" label="Enter a number: "/> <br/>
3    <ui:button label="Submit" press="{!c.validate}"/>
4    <ui:outputNumber aura:id="outNum" value=""/>
5</aura:component>

1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({  
18    validate : function(component, evt) {
19        var inputCmp = component.find("inputCmp");
20        var value = inputCmp.get("v.value");
21        
22        var myOutput = component.find("outNum");
23        
24        myOutput.set("v.value", value);
25        
26        // Check if input is numeric
27        if (isNaN(value)) {
28            // Set error message
29            inputCmp.setValid("v.value", false);
30            inputCmp.addErrors("v.value", [{message:"Input not a number: " + value}]);
31        } else {
32            // Clear error
33            inputCmp.setValid("v.value", true);
34        }
35    }
36})

属性

属性名	属性型	説明	必須項目
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。
`format`	String	数値の形式。たとえば、format=“.00” は、小数点以下 2 桁の数値を表示します。指定されていない場合は、ロケールのデフォルト形式が使用されます。
`value`	BigDecimal	このコンポーネントと共に表示される数値。	はい

イベント

イベント名	イベントタイプ	説明
`mouseup`	COMPONENT	ユーザがマウスボタンを放したことを示します。
`mousedown`	COMPONENT	ユーザがマウスキーを押したことを示します。
`mousemove`	COMPONENT	ユーザがマウスポインタを移動したことを示します。
`dblclick`	COMPONENT	コンポーネントがダブルクリックされたことを示します。
`mouseout`	COMPONENT	ユーザがマウスポインタをコンポーネントから移動したことを示します。
`click`	COMPONENT	コンポーネントがクリックされたことを示します。
`mouseover`	COMPONENT	ユーザがマウスポインタをコンポーネントに移動したことを示します。

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

ui:outputNumber

属性

イベント