ui:outputURL

Displays a link to a URL as specified by the value attribute, rendered on a given text (label attribute) and image, if any.

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);
    }
})

Attributes

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

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.