Lightning コンポーネント開発者ガイド
jui:outputURL
value 属性の指定に従って URL へのリンクを表示します。テキスト (label 属性) および画像が指定されていれば一緒に表示します。
ui:outputURL コンポーネントは、HTML a タグでラップされた URL を表します。このコンポーネントは、URL 入力を取り込む ui:inputURL と共に使用できます。URL を表示する場合、属性値を使用し、ui:outputURL コンポーネントにバインドできます。
1<aura:attribute name="myURL" type="String" default="http://www.google.com"/>
2<ui:outputURL value="{!v.myURL}" label="Search"/>前の例によって次の HTML が表示されます。
1<a href="http://www.google.com" class="uiOutputURL">Search</a>次の例は、ui:inputURL コンポーネントのデータをバインドする方法を示します。
1<aura:component>
2 <ui:inputURL aura:id="url" label="Venue URL" class="field" value="http://www.myURL.com"/>
3 <ui:button class="btn" label="Submit" press="{!c.setOutput}"/>
4 <div aura:id="msg" class="hide">
5 You entered: <ui:outputURL aura:id="oURL" value=""/>
6 </div>
7</aura:component>1({
2 setOutput : function(component, event, helper) {
3 var cmpMsg = component.find("msg");
4 $A.util.removeClass(cmpMsg, 'hide');
5
6 var url = component.find("url").get("v.value");
7 var oURL = component.find("oURL");
8 oURL.set("v.value", url);
9 oURL.set("v.label", url);
10 }
11})属性
| 属性名 | 属性型 | 説明 | 必須項目 |
|---|---|---|---|
| alt | String | 代替テキストによる画像の説明 (表示ラベルがない場合に使用) | |
| body | Component[] | コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。 | |
| class | String | コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。 | |
| disabled | Boolean | コンポーネントを無効な状態で表示するかどうかを指定します。デフォルト値は「false」です。 | |
| iconClass | String | アイコンまたは画像の表示に使用される CSS スタイル。 | |
| label | String | コンポーネントに表示されるテキスト。 | |
| target | String | このコンポーネントが表示される場所。有効な値は、_blank、_parent、_self、_top です。 | |
| title | String | このコンポーネントにマウスポインタが置かれたときにツールチップとして表示されるテキスト。 | |
| value | String | リンク先のページの URL。 | はい |
イベント
| イベント名 | イベントタイプ | 説明 |
|---|---|---|
| dblclick | COMPONENT | ユーザがコンポーネントをダブルクリックすると起動されるイベント。 |
| mouseover | COMPONENT | ユーザがコンポーネントにマウスポインタを重ねると起動されるイベント。 |
| mouseout | COMPONENT | ユーザがコンポーネントからマウスポインタを移動すると起動されるイベント。 |
| mouseup | COMPONENT | ユーザがコンポーネント上でマウスボタンを放すと起動されるイベント。 |
| mousemove | COMPONENT | ユーザがコンポーネントにマウスポインタを重ねると起動されるイベント。 |
| click | COMPONENT | ユーザがコンポーネントをクリックすると起動されるイベント。 |
| mousedown | COMPONENT | ユーザがコンポーネント上でマウスボタンをクリックすると起動されるイベント。 |