A ui:outputEmail component represents an email output that is wrapped in an HTML span tag. We recommend using lightning:formattedEmail instead of ui:outputEmail.
ui:outputEmail can be used with ui:inputEmail, which takes in an email input. To apply Lightning Design System styling, we recommend that you use lightning:input with type="email" instead of ui:inputEmail.
The email output is wrapped in an HTML anchor element and mailto is automatically appended to it. This is a simple set up of a ui:outputEmail component.
<ui:outputEmail value="abc@email.com"/>
The previous example renders the following HTML.
<span><a href="mailto:abc@email.com">abc@email.com</a></span>
This example shows how you can bind data from a ui:inputEmail component. To apply Lightning Design System styling, we recommend that you use lightning:input with type="email" instead of ui:inputEmail.
<aura:component> <ui:inputEmail aura:id="email" label="Email" value="manager@email.com"/> <ui:button label="Submit" press="{!c.setOutput}"/> <div aura:id="msg"> You entered: <ui:outputEmail aura:id="oEmail" value="Email" /> </div> </aura:component>
({ setOutput : function(component, event, helper) { var cmpMsg = component.find("msg"); $A.util.removeClass(cmpMsg, 'hide'); var email = component.find("email").get("v.value"); var oEmail = component.find("oEmail"); oEmail.set("v.value", email); } })
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. | |
value | String | The output value of the email | 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. |