Lightning コンポーネント開発者ガイド
jui: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>1({
2 setOutput : function(component, event, helper) {
3 var cmpMsg = component.find("msg");
4 $A.util.removeClass(cmpMsg, 'hide');
5
6 var name = component.find("name").get("v.value");
7 var oName = component.find("oName");
8 oName.set("v.value", name);
9 }
10})属性
| 属性名 | 属性型 | 説��� | 必須項目 |
|---|---|---|---|
| body | Component[] | コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。 | |
| class | String | コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。 | |
| title | String | このコンポーネント内のテキストのタイトル属性。 | |
| value | String | このコンポーネントと共に表示されるテキスト。 | はい |
イベント
| イベント名 | イベントタイプ | 説明 |
|---|---|---|
| dblclick | COMPONENT | ユーザがコンポーネントをダブルクリックすると起動されるイベント。 |
| mouseover | COMPONENT | ユーザがコンポーネントにマウスポインタを重ねると起動されるイベント。 |
| mouseout | COMPONENT | ユーザがコンポーネントからマウスポインタを移動すると起動されるイベント。 |
| mouseup | COMPONENT | ユーザがコンポーネント上でマウスボタンを放すと起動されるイベント。 |
| mousemove | COMPONENT | ユーザがコンポーネントにマウスポインタを重ねると起動されるイベント。 |
| click | COMPONENT | ユーザがコンポーネントをクリックすると起動されるイベント。 |
| mousedown | COMPONENT | ユーザがコンポーネント上でマウスボタンをクリックすると起動されるイベント。 |