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.
<ui:outputPhone value="415-123-4567"/>
The previous example renders the following HTML.
<span class="uiOutputPhone">415-123-4567</span>
When viewed on a mobile device, the example renders as an actionable link.
<span class="uiOutputPhone"> <a href="tel:415-123-4567">415-123-4567</a> </span>
<aura:component> <ui:inputPhone aura:id="phone" label="Phone Number" class="field" value="415-123-4567" /> <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> <div aura:id="msg" class="hide"> You entered: <ui:outputPhone aura:id="oPhone" value="" /> </div> </aura:component>
({ setOutput : function(component, event, helper) { var cmpMsg = component.find("msg"); $A.util.removeClass(cmpMsg, 'hide'); var phone = component.find("phone").get("v.value"); var oPhone = component.find("oPhone"); oPhone.set("v.value", phone); } })
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 |
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. |