A ui:outputTextArea component represents text output that is wrapped in an HTML span tag. We recommend using lightning:formattedText instead of ui:outputText.
ui:outputTextArea can be used with ui:inputTextArea, which takes in a multiline text input. To apply Lightning Design System styling, we recommend that you use lightning:textarea instead of ui:inputTextArea.
To display text, you can use an attribute value and bind it to the ui:outputTextArea component. A ui:outputTextArea component displays URLs and email addresses as hyperlinks.
<aura:attribute name="myTextArea" type="String" default="some string"/> <ui:outputTextArea value="{!v.myTextArea}"/>
The previous example renders the following HTML.
<span>some string</span>
This example shows how you can bind data from the ui:inputTextArea component. To apply Lightning Design System styling, we recommend that you use lightning:textarea instead of ui:inputTextArea.
<aura:component> <ui:inputTextArea aura:id="comments" label="Comments" value="My comments" rows="5"/> <ui:button label="Submit" press="{!c.setOutput}"/> <div aura:id="msg"> You entered: <ui:outputTextArea aura:id="oTextarea" value=""/> </div> </aura:component>
({ setOutput : function(component, event, helper) { var cmpMsg = component.find("msg"); $A.util.removeClass(cmpMsg, 'hide'); var comments = component.find("comments").get("v.value"); var oTextarea = component.find("oTextarea"); oTextarea.set("v.value", comments); } })
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. | |
linkify | Boolean | Indicates if the URLs in the text are set to render as hyperlinks. | |
value | String | The text to display. | 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. |