この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

ui: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="{!v.myURL}"/>

前の例によって次の HTML が表示されます。

1<a href="http://www.google.com" dir="ltr" class="uiOutputURL">http://www.google.com</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	このコンポーネントと共に表示されるテキスト。	はい

イベント

イベント名	イベントタイプ	説明
`dblclick`	COMPONENT	コンポーネントがダブルクリックされたことを示します。
`mouseover`	COMPONENT	ユーザがマウスポインタをコンポーネントに移動したことを示します。
`mouseout`	COMPONENT	ユーザがマウスポインタをコンポーネントから移動したことを示します。
`mouseup`	COMPONENT	ユーザがマウスボタンを放したことを示します。
`mousemove`	COMPONENT	ユーザがマウスポインタを移動したことを示します。
`click`	COMPONENT	コンポーネントがクリックされたことを示します。
`mousedown`	COMPONENT	ユーザがマウスキーを押したことを示します。

Lightning コンポーネント開発者ガイド

ui:outputURL

属性

イベント