ui:outputTextArea

ui:outputTextArea コンポーネントは、HTML span タグでラップされたテキスト出力を表します。ui:outputText の代わりに lightning:formattedText を使用することをお勧めします。

ui:outputTextArea は、複数のテキスト入力を取り込む ui:inputTextArea と共に使用できます。Lightning Design System のスタイル設定を適用するには、ui:inputTextArea の代わりに lightning:textarea を使用することをお勧めします。

テキストを表示する場合、属性値を使用して ui:outputTextArea コンポーネントにバインドできます。ui:outputTextArea コンポーネントは、URL およびメールアドレスをハイパーリンクとして表示します。

1<aura:attribute name="myTextArea" type="String" default="some string"/>
2<ui:outputTextArea value="{!v.myTextArea}"/>

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

1<span class="uiOutputTextArea">some string</span>

次の例は、ui:inputTextArea コンポーネントのデータをバインドする方法を示します。Lightning Design System のスタイル設定を適用するには、ui:inputTextArea の代わりに lightning:textarea を使用することをお勧めします。

1<aura:component>
2     <ui:inputTextArea aura:id="comments" label="Comments"  value="My comments" rows="5"/>
3     <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> 
4     
5     <div aura:id="msg" class="hide">
6  You entered: <ui:outputTextArea aura:id="oTextarea" 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 comments = component.find("comments").get("v.value");
7        var oTextarea = component.find("oTextarea");
8        oTextarea.set("v.value", comments);
9    }
10})

属性

イベント