ui:outputPhone | Lightning Components Developer’s Guide

A ui:outputPhone component represents a phone number output that is wrapped in an HTML span tag. This component can be used with ui:inputPhone, which takes in a phone number input. The following example is a simple set up of a ui:outputPhone component.

1<ui:outputPhone value="415-123-4567"/>

The previous example renders the following HTML.

1<span class="uiOutputPhone">415-123-4567</span>

When viewed on a mobile device, the example renders as an actionable link.

1<span class="uiOutputPhone">
2    <a href="tel:415-123-4567">415-123-4567</a>
3</span>

This example shows how you can bind data from a ui:inputPhone component.

1<aura:component>
2    <ui:inputPhone aura:id="phone" label="Phone Number" class="field" value="415-123-4567" />
3    <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> 
4
5 <div aura:id="msg" class="hide">
6  You entered: <ui:outputPhone aura:id="oPhone" value="" />
7 </div>
8</aura:component>

1swfobject.registerObject("clippy.codeblock-4", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18   
19    setOutput : function(component, event, helper) {
20    	var el = component.find("msg");
21    	$A.util.removeClass(el.getElement(), 'hide');
22       
23        var phone = component.find("phone").get("v.value");
24        var oPhone = component.find("oPhone");
25        oPhone.set("v.value", phone);
26    }
27})

Attributes

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 phone number displayed when this component is rendered.	Yes

Events

Event Name	Event Type	Description
`mouseup`	COMPONENT	Indicates that the user has released the mouse button.
`mousedown`	COMPONENT	Indicates that the user has pressed a mouse key.
`mousemove`	COMPONENT	Indicates that the user has moved the mouse pointer.
`dblclick`	COMPONENT	Indicates that a component has been double-clicked.
`mouseout`	COMPONENT	Indicates that the user has moved the mouse pointer away from the component.
`click`	COMPONENT	Indicates that a component has been clicked.
`mouseover`	COMPONENT	Indicates that the user has moved the mouse pointer over the component.