Web Components Linear Progress (リニア プログレス) の概要

    Ignite UI for Web Components Linear Progress Indicator コンポーネントは、変更でアプリケーションの進行状況を表す視覚的なインジケーターです。IgcLinearProgressComponent インジケーターは状態変更で外観を更新します。また、 このコンポーネントがストライプまたは実線色でスタイル設定できます。

    Web Components Linear Progress の例

    使用方法

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

    npm install igniteui-webcomponents
    
    import {defineComponents, IgcLinearProgressComponent} from 'igniteui-webcomponents';
    
    defineComponents(IgcLinearProgressComponent);
    

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

    <igc-linear-progress value="100"></igc-linear-progress>
    

    進行状況タイプ

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

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

    ストライプ プログレス

    striped プロパティを使用して、インジケーターをストライプにすることができます:

    不確定のプログレス

    正確に決定されていないプロセスをトラックしたい場合、indeterminate プロパティを設定できます。

    アニメーション期間

    animationDuration プロパティは、アニメーション サイクルにかかる時間を指定するために使用されます。値として、アニメーションの継続時間をミリ秒単位で表す数値を取ります。

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

    Text プロパティ

    labelAlign プロパティを使用して、デフォルト値を調整できます。許可される値は、topbottomtop-starttop-endbottom-start、および bottom-end です。

    進行状況インジケーターのデフォルトのラベルを非表示にするには、hideLabel 属性を使用します。

    labelFormat プロパティを使用して、IgcLinearProgressComponent のデフォルト ラベルをカスタマイズできます。

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

    ダイナミック プログレス

    ボタンなどの外部コントロールを使用して進行状況インジケーターの値を動的に変更できます。これを実現するには、値をクラス プロパティにバインドします。

    スタイル設定

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

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

    名前 説明
    track プログレス リングのトラック領域。
    fill 進行状況インジケーター領域。
    striped 進行状況のストライプ インジケーター。
    label 進行状況インジケーター ラベル。
    value 進行状況ラベルの値。
    indeterminate 進行状況の indeterminate 状態。
    primary 進行状況インジケーターの primary 状態。
    danger 進行状況インジケーターの error 状態。
    warning 進行状況インジケーターの warning 状態。
    info 進行状況インジケーターの info の状態。
    success 進行状況インジケーターの success 状態。
    top 進行状況ラベルの配置。
    top-start 進行状況ラベルの配置。
    top-end 進行状況ラベルの配置。
    bottom 進行状況ラベルの配置。
    bottom-start 進行状況ラベルの配置。
    bottom-end 進行状況ラベルの配置。

    API リファレンス

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

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

    その他のリソース