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

ui:outputNumber

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

ui:outputNumber コンポーネントは、HTML span タグとして表示される数値出力を表します。ui:outputNumber の代わりに lightning:formattedNumber を使用することをお勧めします。

ui:outputNumber は、数値��力を取り込む ui:inputNumber と共に使用できます。Lightning Design System のスタイル設定を適用するには、ui:inputNumber の代わりに lightning:input を使用し、type="number" を指定することをお勧めします。

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 を使用して値を表示します。Lightning Design System のスタイル設定を適用するには、ui:inputNumber の代わりに lightning:input を使用し、type="number" を指定することをお勧めします。同様に、ui:outputNumber の代わりに lightning:formattedNumber を使用することをお勧めします。

1<aura:component> 
2    <aura:attribute name="myNumber" type="integer" default="10"/>
3 <ui:inputNumber label="Enter a number: " value="{!v.myNumber}" updateOn="keyup"/> <br/>
4    <ui:outputNumber value="{!v.myNumber}"/>
5</aura:component>

属性

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

イベント

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

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

ui:outputNumber

属性

イベント