Web Components Circular Progress (円形プログレス) の概要

    Ignite UI for Web Components Circular Progress Indicator コンポーネントは、変更でアプリケーションの進行状況を表す視覚的なインジケーターです。丸形インジケーターは状態変更で外観を更新します。

    Web Components Circular Progress の例

    使用方法

    まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:

    npm install igniteui-webcomponents
    

    次に、以下のように、IgcCircularProgressComponent とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

    import {defineComponents, IgcCircularProgressComponent} from 'igniteui-webcomponents';
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    
    defineComponents(IgcCircularProgressComponent);
    
    <igc-circular-progress value="100"></igc-circular-progress>
    

    進行状況タイプ

    variant 属性を使用して、インジケーターのタイプを設定できます。Circular Progress インジケーターには、primary (デフォルト)、errorsuccessinfo、および warning の 5 種類があります。

    <igc-circular-progress value="100" variant="success"></igc-circular-progress>
    

    不確定のプログレス

    正確に決定されていないプロセスをトラックしたい場合、indeterminate プロパティを設定できます。また、hideLabel プロパティを設定することで、Ignite UI for Web Components IgcCircularProgressComponent のデフォルトのラベルを非表示にし、公開された labelFormat プロパティを介して進行状況インジケーターのデフォルトのラベルをカスタマイズできます。

    <igc-circular-progress value="100" indeterminate="true"></igc-circular-progress>
    

    次のサンプルは、上記の構成を示しています:

    アニメーション期間

    IgcCircularProgressComponent コンポーネントの animationDuration プロパティを使用して、アニメーション サイクルにかかる時間をミリ秒単位で指定できます。

    <igc-circular-progress animation-duration="5000" indeterminate></igc-circular-progress>
    

    グラデーション プログレス

    単色の代わりにカラー グラデーションを使用するためにプログレス バーをカスタマイズするには、公開された gradient スロットとグラデーション境界を定義する IgcCircularGradientComponent を使用します。

    Note

    Ignite UI for Web Components IgcCircularProgressComponent のグラデーション スロットとして定義された IgcCircularGradientComponent ごとに、SVG Stop 要素が作成されます。coloroffset、および opacity として渡された値は、それ以上の検証なしで、SVG 要素の stop-color、offset、および stop-opacity として設定されます。

    <igc-circular-progress>
        <igc-circular-gradient slot="gradient" offset="0%" color="#ff9a40"></igc-circular-gradient>
        <igc-circular-gradient slot="gradient" offset="50%" color="#1eccd4"></igc-circular-gradient>
        <igc-circular-gradient slot="gradient" offset="100%" color="#ff0079"></igc-circular-gradient>
    </igc-circular-progress>
    

    スタイル設定

    Ignite UI for Web Components Circular Procress Indicator コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。

    次の表に、Circular Progress によって公開されるすべての CSS パーツを示します:

    名前 説明
    svg 進行状況 SVG 要素。
    gradient_start 進行線形グラデーションの開始色。
    gradient_end 進行線形グラデーションの終了色。
    track プログレス リングのトラック領域。
    fill 進行状況インジケーター領域。
    label 進行状況ラベル。
    value 進行状況ラベルの値。
    indeterminate 進行状況の indeterminate 状態。
    primary 進行状況インジケーターの primary 状態。
    danger 進行状況インジケーターの error 状態。
    warning 進行状況インジケーターの warning 状態。
    info 進行状況インジケーターの info の状態。
    success 進行状況インジケーターの success 状態。

    API リファレンス

    Circular Progress Indicator の API の詳細については、次のリンクを参照してください:

    使用したその他のコンポーネントとディレクティブ:

    その他のリソース

    API メンバー