A ui:outputURL component represents a URL that is wrapped in an HTML a tag. This component can be used with ui:inputURL, which takes in a URL input. To display a URL, you can use an attribute value and bind it to the ui:outputURL component.
<aura:attribute name="myURL" type="String" default="http://www.google.com"/> <ui:outputURL value="{!v.myURL}" label="{!v.myURL}"/>
The previous example renders the following HTML.
<a href="http://www.google.com" dir="ltr" class="uiOutputURL">http://www.google.com</a>
This example shows how you can bind data from a ui:inputURL component.
<aura:component> <ui:inputURL aura:id="url" label="Venue URL" class="field" value="http://www.myURL.com"/> <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> <div aura:id="msg" class="hide"> You entered: <ui:outputURL aura:id="oURL" value=""/> </div> </aura:component>
({ setOutput : function(component, event, helper) { var cmpMsg = component.find("msg"); $A.util.removeClass(cmpMsg, 'hide'); var url = component.find("url").get("v.value"); var oURL = component.find("oURL"); oURL.set("v.value", url); oURL.set("v.label", url); } })
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
alt | String | The alternate text description for image (used when there is no label) | |
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. | |
disabled | Boolean | Specifies whether the component should be displayed in a disabled state. Default value is "false". | |
iconClass | String | The CSS style used to display the icon or image. | |
label | String | The text displayed on the component. | |
target | String | The target destination where this rendered component is displayed. Possible values: _blank, _parent, _self, _top | |
title | String | The text to display as a tooltip when the mouse pointer hovers over this component. | |
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. |