Lightning Components Developer Guide
jNewer Version Available
ui:outputNumber
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.
1<aura:attribute name="myNum" type="Decimal" default="10.10"/>
2<ui:outputNumber value="{!v.myNum}" format=".00"/>The previous example renders the following HTML.
1<span class="uiOutputNumber">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.
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>Attributes
| 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 |
Events
| 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. |