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

ui:spinner

実際のコンポーネントのボディを読み込み中に使用する読み込みスピナー。

スピナーを切り替えるには、get("e.toggle") を使用し、isVisible パラメータを true または false に設定して、イベントを起動します。

次の例では、コンポーネントがサーバ応答を待機中はスピナーを表示し、コンポーネントが応答の待機を停止するとスピナーを削除します。

1<aura:component>
2    <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
3    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
4   
5   <center><ui:spinner aura:id="spinner"/></center>
6</aura:component>

次のクライアント側コントローラでは、適宜スピナーを表示または非表示にします。

1({
2     showSpinner : function (component, event, helper) {
3        var spinner = component.find('spinner');
4        var evt = spinner.get("e.toggle");
5        evt.setParams({ isVisible : true });
6        evt.fire();    
7    },
8    
9    hideSpinner : function (component, event, helper) {
10       var spinner = component.find('spinner');
11       var evt = spinner.get("e.toggle");
12       evt.setParams({ isVisible : false });
13       evt.fire();    
14    }
15})

次の例では、切り替え可能なスピナーを表示します。

1<aura:component access="global">
2 <ui:spinner aura:id="spinner"/>
3 <ui:button press="{!c.toggleSpinner}" label="Toggle Spinner" />
4</aura:component>

1({
2    toggleSpinner: function(cmp) {
3        var spinner = cmp.find('spinner');
4        var evt = spinner.get("e.toggle");
5        
6    if(!$A.util.hasClass(spinner, 'hideEl')){
7        evt.setParams({ isVisible : false });
8     }		
9    else {
10        evt.setParams({ isVisible : true });
11	}
12    evt.fire();
13    }
14})

属性

属性名	属性型	説明
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。
`isVisible`	Boolean	このスピナーを表示するかどうかを指定します。デフォルトは true です。

イベント

イベント名	イベントタイプ	説明
`toggleLoadingIndicator`	COMPONENT	ui:spinner コンポーネントの表示設定を変更します。

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

ui:spinner

属性

イベント