Lightning コンポーネント開発者ガイド
jui:outputEmail
HTML アンカー (<a>) 要素内にメールアドレスを表示します。先頭および末尾の空白は削除されます。
ui:outputEmail コンポーネントは、HTML span タグでラップされたメール出力を表します。このコンポーネントは、メール入力を取り込む ui:inputEmail と共に使用できます。メール出力は HTML アンカー要素でラップされ、mailto が自動的に付加されます。次の例は、ui:outputEmail コンポーネントの簡単な設定です。
1<ui:outputEmail value="abc@email.com"/>前の例によって次の HTML が表示されます。
1<span><a href="mailto:abc@email.com" class="uiOutputEmail">abc@email.com</a></span>次の例は、ui:inputEmail コンポーネントのデータをバインドする方法を示します。
1<aura:component>
2 <ui:inputEmail aura:id="email" label="Email" class="field" value="manager@email.com"/>
3 <ui:button class="btn" label="Submit" press="{!c.setOutput}"/>
4
5 <div aura:id="msg" class="hide">
6 You entered: <ui:outputEmail aura:id="oEmail" value="Email" />
7 </div>
8
9</aura:component>1({
2 setOutput : function(component, event, helper) {
3 var cmpMsg = component.find("msg");
4 $A.util.removeClass(cmpMsg, 'hide');
5
6 var email = component.find("email").get("v.value");
7 var oEmail = component.find("oEmail");
8 oEmail.set("v.value", email);
9
10 }
11})属性
| 属性名 | 属性型 | 説明 | 必須項目 |
|---|---|---|---|
| body | Component[] | コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。 | |
| class | String | コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。 | |
| value | String | メールの出力値。 | はい |
イベント
| イベント名 | イベントタイプ | 説明 |
|---|---|---|
| dblclick | COMPONENT | ユーザがコンポーネントをダブルクリックすると起動されるイベント。 |
| mouseover | COMPONENT | ユーザがコンポーネントにマウスポインタを重ねると起動されるイベント。 |
| mouseout | COMPONENT | ユーザがコンポーネントからマウスポインタを移動すると起動されるイベント。 |
| mouseup | COMPONENT | ユーザがコンポーネント上でマウスボタンを放すと起動されるイベント。 |
| mousemove | COMPONENT | ユーザがコンポーネントにマウスポインタを��ねると起動されるイベント。 |
| click | COMPONENT | ユーザがコンポーネントをクリックすると起動されるイベント。 |
| mousedown | COMPONENT | ユーザがコンポーネント上でマウスボタンをクリックすると起動されるイベント。 |