A ui:outputNumber component represents a number output that is rendered as an HTML span tag. We recommend using lightning:formattedNumber instead of ui:outputNumber.
ui:outputNumber can be used with ui:inputNumber, which takes in a number input. To apply Lightning Design System styling, we recommend that you use lightning:input with type="number" instead of ui:inputNumber.
ui:outputNumber retrieves the locale information and displays the number in the given decimal format. To display a number, you can use an attribute value and bind it to the ui:outputNumber component.
<aura:attribute name="myNum" type="Decimal" default="10.10"/> <ui:outputNumber value="{!v.myNum}" format=".00"/>
The previous example renders the following HTML.
<span>10.10</span>
This example retrieves the value of a ui:intputNumber component, validates the input, and displays it using ui:outputNumber. To apply Lightning Design System styling, we recommend that you use lightning:input with type="number" instead of ui:inputNumber. Similarly, we recommend using lightning:formattedNumber instead of ui:outputNumber.
<aura:component> <aura:attribute name="myNumber" type="integer" default="10"/> <ui:inputNumber label="Enter a number: " value="{!v.myNumber}" updateOn="keyup"/> <br/> <ui:outputNumber value="{!v.myNumber}"/> </aura:component>
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
class | String | A CSS style to be attached to the component. This style is added in addition to base styles output by the component. | |
format | String | The format of the number. For example, format=“.00” displays the number followed by two decimal places. If not specified, the Locale default format will be used. | |
value | Decimal | The number displayed when this component is rendered. | Yes |
Event Name | Event Type | Description |
---|---|---|
dblclick | COMPONENT | The event fired when the user double-clicks the component. |
mouseover | COMPONENT | The event fired when the user moves the mouse pointer over the component. |
mouseout | COMPONENT | The event fired when the user moves the mouse pointer away from the component. |
mouseup | COMPONENT | The event fired when the user releases the mouse button over the component. |
mousemove | COMPONENT | The event fired when the user moves the mouse pointer over the component. |
click | COMPONENT | The event fired when the user clicks on the component. |
mousedown | COMPONENT | The event fired when the user clicks a mouse button over the component. |