Lightning コンポーネント開発者ガイド
jui:outputPhone
電話番号を URL リンク形式で表示します。
ui:outputPhone コンポーネントは、HTML span タグでラップされた電話番号出力を表します。このコンポーネントは、電話番号入力を取り込む ui:inputPhone と共に使用できます。次の例は、ui:outputPhone コンポーネントの簡単な設定です。
1<ui:outputPhone value="415-123-4567"/>前の例によって次の HTML が表示されます。
1<span class="uiOutputPhone">415-123-4567</span>モバイルデバイスで表示すると、この例はアクション可能なリンクとして表示されます。
1<span class="uiOutputPhone">
2 <a href="tel:415-123-4567">415-123-4567</a>
3</span>
次の例は、ui:inputPhone コンポーネントのデータをバインドする方法を示します。
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>1({
2
3 setOutput : function(component, event, helper) {
4 var cmpMsg = component.find("msg");
5 $A.util.removeClass(cmpMsg, 'hide');
6
7 var phone = component.find("phone").get("v.value");
8 var oPhone = component.find("oPhone");
9 oPhone.set("v.value", phone);
10 }
11})属性
| 属性名 | 属性型 | 説明 | 必須項目 |
|---|---|---|---|
| body | Component[] | コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。 | |
| class | String | コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。 | |
| value | String | このコンポーネントと共に表示される電話番号。 | はい |
イベント
| イベント名 | イベントタイプ | 説明 |
|---|---|---|
| dblclick | COMPONENT | コンポーネントがダブルクリックされたことを示します。 |
| mouseover | COMPONENT | ユーザがマウスポインタをコンポーネントに移動したことを示します。 |
| mouseout | COMPONENT | ユーザがマウスポインタをコンポーネントから移動したことを示します。 |
| mouseup | COMPONENT | ユーザがマウスボタンを放したことを示します。 |
| mousemove | COMPONENT | ユーザがマウスポインタを移動したことを示します。 |
| click | COMPONENT | コンポーネントがクリックされたことを示します。 |
| mousedown | COMPONENT | ユーザがマウスキーを押したことを示します。 |