この文章は 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>

1({
2    validate : function(component, evt) {
3        var inputCmp = component.find("inputCmp");
4        var value = inputCmp.get("v.value");
5
6        var myOutput = component.find("outNum");
7        myOutput.set("v.value", value);
8
9        // Check if input is numeric
10        if (isNaN(value)) {
11            inputCmp.set("v.errors", [{message:"Input not a number: " + value}]);
12        } else {
13            inputCmp.set("v.errors", null);
14        }
15    }
16})

属性

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

イベント

イベント名	イベントタイプ	説明
`dblclick`	COMPONENT	ユーザがコンポーネントをダブルクリックすると起動されるイベント。
`mouseover`	COMPONENT	ユーザがコンポーネントにマウスポインタを重ねると起動されるイベント。
`mouseout`	COMPONENT	ユーザがコンポーネントからマウスポインタを移動すると起動されるイベント。
`mouseup`	COMPONENT	ユーザがコンポーネント上でマウスボタンを放すと起動されるイベント。
`mousemove`	COMPONENT	ユーザがコンポーネントにマウスポインタを重ねると起動されるイベント。
`click`	COMPONENT	ユーザがコンポーネントをクリックすると起動されるイベント。
`mousedown`	COMPONENT	ユーザがコンポーネント上でマウスボタンをクリックすると起動されるイベント。

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

ui:outputNumber

属性

イベント