ui:outputCurrency
通貨をデフォルトまたは指定形式 (特定の通貨コードまたは小数点の使用など) で表示します。
ui:outputCurrency コンポーネントは、数値を HTML span タグでラップされた通貨として表します。このコンポーネントは、数値を通貨として取り込む ui:inputCurrency と共に使用できます。通貨を表示する場合、属性値を使用して ui:outputCurrency コンポーネントにバインドできます。
1<aura:attribute name="myCurr" type="Decimal" default="50000"/>
2<ui:outputCurrency aura:id="curr" value="{!v.myCurr}"/>前の例によって次の HTML が表示されます。
1<span class="uiOutputCurrency">$50,000.00</span>ブラウザのロケールを上書きするには、currencySymbol 属性を使用します。
1<aura:attribute name="myCurr" type="Decimal" default="50" currencySymbol="£"/>形式を指定して上書きすることもできます。
1var curr = cmp.find("curr");
2curr.set("v.format", '£#,###.00');次の例は、ui:inputCurrency コンポーネントのデータをバインドする方法を示します。
1<aura:component>
2 <ui:inputCurrency aura:id="amount" label="Amount" class="field" value="50"/>
3 <ui:button class="btn" label="Submit" press="{!c.setOutput}"/>
4
5 <div aura:id="msg" class="hide">
6 You entered: <ui:outputCurrency aura:id="oCurrency" 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 amount = component.find("amount").get("v.value");
7 var oCurrency = component.find("oCurrency");
8 oCurrency.set("v.value", amount);
9 }
10})属性
| 属性名 | 属性型 | 説明 | 必須項目 |
|---|---|---|---|
| body | Component[] | コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。 | |
| class | String | コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。 | |
| currencyCode | String | 文字列として指定された ISO 4217 通貨コード (「USD」など)。 | |
| currencySymbol | String | 文字列として指定された通貨記号。 | |
| format | String | 数値の形式。たとえば、format=“.00” は、小数点以下 2 桁の数値を表示します。指定されない場合は、ブラウザのロケールに基づくデフォルトの形式が使用されます。 | |
| value | BigDecimal | Decimal 型で定義された通貨の出力値。 | はい |
イベント
| イベント名 | イベントタイプ | 説明 |
|---|---|---|
| dblclick | COMPONENT | コンポーネントがダブルクリックされたことを示します。 |
| mouseover | COMPONENT | ユーザがマウスポインタをコンポーネントに移動したことを示します。 |
| mouseout | COMPONENT | ユーザがマウスポインタをコンポーネントから移動したことを示します。 |
| mouseup | COMPONENT | ユーザがマウスボタンを放したことを示します。 |
| mousemove | COMPONENT | ユーザがマウスポインタを移動したことを示します。 |
| click | COMPONENT | コンポーネントがクリックされたことを示します。 |
| mousedown | COMPONENT | ユーザがマウスキーを押したことを示します。 |