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

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

    Blazor Linear Progress の例

    EXAMPLE
    MODULES
    RAZOR
    CSS

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

    使用方法

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

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

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

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

    進行状況タイプ

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

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

    ストライプ プログレス

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

    EXAMPLE
    MODULES
    RAZOR
    CSS

    不確定のプログレス

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

    アニメーション期間

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

    <IgbLinearProgress AnimationDuration=5000 Indeterminate=true />
    razor

    Text プロパティ

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

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

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

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

    EXAMPLE
    MODULES
    RAZOR
    CSS

    ダイナミック プログレス

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

    EXAMPLE
    MODULES
    RAZOR
    CSS

    スタイル設定

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

    EXAMPLE
    MODULES
    RAZOR
    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 リファレンス

    その他のリソース