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

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

    Web Components Linear Progress の例

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

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

    使用方法

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

    npm install igniteui-webcomponents
cmd

    IgcLinearProgressComponent を使用する前に、次のように登録する必要があります:

    import {defineComponents, IgcLinearProgressComponent} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcLinearProgressComponent);
ts

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

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

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

    進行状況タイプ

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

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

    ストライプ プログレス

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    不確定のプログレス

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

    アニメーション期間

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

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

    Text プロパティ

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

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

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

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

    EXAMPLE
    TS
    HTML
    index.css
    LinearProgressStyles.css
    Edit in:

    ダイナミック プログレス

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Ignite UI for Web Components | CTA Banner

    スタイル設定

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

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

    この CSS パーツを使用すると、Linear Progress のスタイルをほぼ完全に制御できます。

    EXAMPLE
    TS
    HTML
    index.css
    LinearProgressStyling.css
    Edit in: 

    igc-linear-progress::part(track){
  background-color: var(--ig-gray-300)
}

igc-linear-progress::part(fill){
  background-color: var(--ig-primary-300)
}

igc-linear-progress::part(label){
  color: var(--ig-primary-300)
}
css

    API リファレンス

    その他のリソース