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

lightning:progressBar

操作の進行状況を左から右へ示す、横方向の進行状況バーを表示します。このコンポーネントでは、API バージョン 41.0 以降が必要です。

lightning:progressBar コンポーネントは、ファイルのダウンロードやアップロードなど、操作の進行状況を左から右へ示します。

このコンポーネントは、Lightning Design System の進行状況バーからスタイル設定を継承します。

次の例では、コンポーネントの表示と再表示の進行状況バーを読み込みます。

1<aura:component>
2    <aura:handler name="render" value="{!this}" action="{!c.onRender}"/>
3    <aura:attribute name="progress" type="Integer" default="0"/>
4    <lightning:progressBar value="{!v.progress}"/>
5</aura:component>

進行状況バーの値を変更するクライアント側コントローラは、次のようになります。progress === 100 ? clearInterval(interval) : progress + 10 を指定すると、進行状況値が 10% 増加し、進行状況が 100% に達するとアニメーションが停止します。進行状況バーは 200 ミリ秒ごとに更新されます。

1({
2    onRender: function (cmp) {
3        var interval = setInterval($A.getCallback(function () {
4            var progress = cmp.get('v.progress');
5            cmp.set('v.progress', progress === 100 ? clearInterval(interval) : progress + 10);
6        }), 200);
7    }
8})

属性

属性名	属性型	説明
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントの基本クラスに加え、外部要素の CSS クラス。
`title`	String	マウスポインタが要素に重ねられたときにツールチップテキストを表示します。
`variant`	String	進行状況バーのバリエーション。有効な値は、base および circular です。
`value`	Integer	進行状況バーのパーセント値。
`size`	String	進行状況バーのサイズ。有効な値は、x-small、small、medium、large です。デフォルト値は、medium です。

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

lightning:progressBar

属性