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

ui:outputText

value 属性の指定に従ってテキストを表示します。

ui:outputText コンポーネントは、HTML span タグでラップされたテキスト出力を表します。このコンポーネントは、テキスト入力を取り込む ui:inputText と共に使用できます。テキストを表示する場合、属性値を使用して ui:outputText コンポーネントにバインドできます。

1<aura:attribute name="myText" type="String" default="some string"/>
2<ui:outputText value="{!v.myText}" label="my output"/>

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

1<span dir="ltr" class="uiOutputText">
2    some string
3</span>

次の例は、ui:inputText コンポーネントのデータをバインドする方法を示します。

1<aura:component>
2 <ui:inputText aura:id="name" label="Enter some text" class="field" value="My Text"/>
3    <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> 
4
5 <div aura:id="msg" class="hide">
6  You entered: <ui:outputText aura:id="oName" value=""/> 
7 </div>
8</aura:component>

1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18	 setOutput : function(component, event, helper) {
19		var el = component.find("msg");
20	    $A.util.removeClass(el.getElement(), 'hide');
21	    
22        var name = component.find("name").get("v.value");
23        var oName = component.find("oName");
24        oName.set("v.value", name); 
25	 }
26})

属性

属性名	属性型	説明	必須項目
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。
`value`	String	このコンポーネントと共に表示されるテキスト。	はい

イベント

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

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

ui:outputText

属性

イベント