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

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

    Blazor Linear Progress の例

    使用方法

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

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(typeof(IgbLinearProgressModule));
    

    また、追加の CSS ファイルをリンクして、スタイルを IgbCalendar コンポーネントに適用する必要があります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
    
    <IgbLinearProgress Value=100 />
    

    進行状況タイプ

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

    <IgbLinearProgress Value=100 Variant=@ProgressBaseVariant.Success />
    

    ストライプ プログレス

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

    不確定のプログレス

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

    アニメーション期間

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

    <IgbLinearProgress AnimationDuration=5000 Indeterminate=true />
    

    Text プロパティ

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

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

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

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

    ダイナミック プログレス

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

    スタイル設定

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

    次の表に、Linear Progress によって公開されるすべての 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 リファレンス

    その他のリソース