この文章は 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>

1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18    toggleSpinner: function(cmp, event) {
19        var spinner = cmp.find('spinner');
20        var evt = spinner.get("e.toggle");
21        
22    if(!$A.util.hasClass(spinner.getElement(), 'hideEl')){
23        evt.setParams({ isVisible : false });
24     }		
25    else {
26        evt.setParams({ isVisible : true });
27	}
28    evt.fire();
29    }
30})

属性

属性名	属性型	説明	必須項目
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`isVisible`	Boolean	このスピナーを表示するかどうかを指定します。デフォルトは true です。

イベント

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

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

ui:spinner

属性

イベント