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

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

    Web Components Circular Progress の例

    EXAMPLE
    TS
    HTML
    CircularProgressStyle.css
    index.css

    このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    使用方法

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

    npm install igniteui-webcomponents
    cmd

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

    import {defineComponents, IgcCircularProgressComponent} from 'igniteui-webcomponents';
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    
    defineComponents(IgcCircularProgressComponent);
    ts

    Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

    IgcCircularProgressComponent の使用を開始する最も簡単な方法は次のとおりです:

    <igc-circular-progress value="100"></igc-circular-progress>
    html

    進行状況タイプ

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

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

    不確定のプログレス

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

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

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

    EXAMPLE
    TS
    HTML
    IndeterminateCircularProgressStyle.css
    index.css

    アニメーション期間

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

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

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

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

    EXAMPLE
    TS
    HTML
    DynamicCircularProgressStyle.css
    index.css

    Ignite UI for Web Components IgcCircularProgressComponent のグラデーション スロットとして定義された IgcCircularGradientComponent ごとに、SVG stop 要素が作成されます。color、offset、および 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>
    html
    Ignite UI for Web Components | CTA Banner

    スタイル設定

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

    EXAMPLE
    TS
    HTML
    CircularProgressStyling.css
    index.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 リファレンス

    その他のリソース