A ui:outputText component represents text output that is wrapped in an HTML span tag. This component can be used with ui:inputText, which takes in a text input. To display text, you can use an attribute value and bind it to the ui:outputText component.
<aura:attribute name="myText" type="String" default="some string"/> <ui:outputText value="{!v.myText}" />
The previous example renders the following HTML.
<span dir="ltr" class="uiOutputText"> some string </span>
This example shows how you can bind data from an ui:inputText component.
<aura:component> <aura:attribute name="myText" type="string" default="Hello there!"/> <ui:inputText label="Enter some text" class="field" value="{!v.myText}" updateOn="click"/> You entered: <ui:outputText value="{!v.myText}"/> </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. | |
title | String | Displays extra information as hover text. | |
value | String | The text 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. |