Blazor Stepper (ステッパー) の概要

Blazor ステッパーコンポーネントは、ウィザードのようなワークフローを提供し、番号付きのステップの進行状況を示すために使用されます。これにより、開発者は長いコンテンツを一連の論理的なステップに分割できるため、エンドユーザーはプロセス全体をより簡単にナビゲートできます。Blazor ステッパーは、垂直または水平な線で表示されます。Blazor ステッパーには、ステップの検証、スタイル設定、向き、キーボードナビゲーションなどの複数の機能があります。

Blazor ステッパーの例

次の Ignite UI for Blazor ステッパーの例は、動作中のコンポーネントを示しています。これは、エンドユーザーが注文の詳細を構成するために通過しなければならないプロセスを、いくつかの連続したステップに従って視覚化します。

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;

// required for registering IgniteUIBlazor
using IgniteUI.Blazor.Controls;

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            // registering Infragistics Blazor
            builder.Services.AddIgniteUIBlazor(typeof(IgbStepperModule),
                typeof(IgbRadioGroupModule),
                typeof(IgbRadioModule),
                typeof(IgbInputModule),
                typeof(IgbSwitchModule),
                typeof(IgbButtonModule));

            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Infragistics.Samples
{
    public class StepperUserModel
    {
        public string FullName { get; set; }
        public string Email { get; set; }
        public string City { get; set; }
        public string Street { get; set; }
        public string City2 { get; set; }
        public string Street2 { get; set; }
        public string Payment { get; set; }
    }
}cs


@using IgniteUI.Blazor.Controls
@using System.Text.RegularExpressions

<style>
igc-switch {
    margin: 0.5rem;
}

igc-button {
    margin-top: 1rem;
}
</style>
<div class="container vertical">
    <IgbSwitch Change="OnSwitchChange">Linear</IgbSwitch>
    <IgbStepper Name="stepper" @ref="stepper" Linear="@IsLinear">
        <IgbStep Invalid="@(IsLinear && (String.IsNullOrEmpty(user.FullName) || IsInvalidEmail(user.Email)))">
            <span slot="title">Personal Info</span>

            <IgbInput Required="true" DisplayType=InputType.Text Label="Full Name" @bind-Value="@user.FullName" @oninput="@(e => { user.FullName = e.Value.ToString(); })"></IgbInput>
            <IgbInput Required="true" DisplayType=InputType.Email Label="Email" @bind-Value="user.Email" @oninput="@(e => { user.Email = e.Value.ToString(); })"></IgbInput>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Next" Disabled="@(IsLinear && (String.IsNullOrEmpty(user.FullName) || IsInvalidEmail(user.Email)))">NEXT</IgbButton>
        </IgbStep>
        <IgbStep Invalid="@(IsLinear && (String.IsNullOrEmpty(user.City) || String.IsNullOrEmpty(user.Street)))">
            <span slot="title">Delivery address</span>

            <IgbInput Required="true" DisplayType=InputType.Text Label="City" @bind-Value="@user.City" @oninput="@(e => { user.City = e.Value.ToString(); })"></IgbInput>
            <IgbInput Required="true" DisplayType=InputType.Text Label="Street" @bind-Value="@user.Street" @oninput="@(e => { user.Street = e.Value.ToString(); })"></IgbInput>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Previous">PREVIOUS</IgbButton>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Next" Disabled="@(IsLinear && (String.IsNullOrEmpty(user.City) || String.IsNullOrEmpty(user.Street)))">NEXT</IgbButton>
        </IgbStep>
        <IgbStep Optional="true">
            <span slot="title">Billing address</span>
            <span slot="subtitle">(optional)</span>

            <IgbInput DisplayType=InputType.Text Label="City" @bind-Value="@user.City2" @oninput="@(e => { user.City2 = e.Value.ToString(); })"></IgbInput>
            <IgbInput DisplayType=InputType.Text Label="Street" @bind-Value="@user.Street2" @oninput="@(e => { user.Street2 = e.Value.ToString(); })"></IgbInput>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Previous">PREVIOUS</IgbButton>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Next">NEXT</IgbButton>
        </IgbStep>
        <IgbStep Invalid="@(IsLinear && !IsValid)">
            <span slot="title">Payment</span>

            <IgbRadioGroup>
                <IgbRadio name="payment" Required="true" Value="paypal" Change="OnPaymentChange">PayPal (n@mail.com; 18/02/2021)</IgbRadio>
                <IgbRadio name="payment" Required="true" Value="visa" Change="OnPaymentChange">Visa (**** **** **** 1234; 12/23)</IgbRadio>
                <IgbRadio name="payment" Required="true" Value="mastercard" Change="OnPaymentChange">MasterCard (**** **** **** 5678; 12/24)</IgbRadio>
            </IgbRadioGroup>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Previous">PREVIOUS</IgbButton>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Next" Disabled="@(IsLinear && !IsValid)">SUBMIT</IgbButton>
        </IgbStep>
        <IgbStep>
            <span slot="title">Delivery status</span>
            <p>Your order is on its way. Expect delivery on 25th September 2021. Delivery address: San Jose, CA 94243.</p>
             <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Previous">PREVIOUS</IgbButton>
             <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Reset">RESET</IgbButton>
        </IgbStep>
    </IgbStepper>
</div>

@code {
    
    public bool IsLinear { get; set; }
    public bool IsValid = false;

    private IgbStepper stepper;
    private StepperUserModel user = new StepperUserModel();

    public void OnSwitchChange(IgbCheckboxChangeEventArgs args)
    {
        IsLinear = args.Detail.Checked;
    }

    public void OnPaymentChange(IgbRadioChangeEventArgs args)
    {
        IsValid = args.Detail.Checked;
        if (IsValid)
        {
            user.Payment = (args.Parent as IgbRadio).Value.ToString();
        }
    }

    public void Previous()
    {
        this.stepper.Prev();
    }

    public void Next()
    {
        this.stepper.Next();
    }

    public void Reset()
    {
        this.stepper.Reset();
    }

    public bool IsInvalidEmail(string email)
    {
        string EmailPattern = @"^(?!\.)(""([^""\r\\]|\\[""\r\\])*""|" + @"([-a-z0-9!#$%&'*+/=?^_`{|}~]|(?<!\.)\.)*)(?<!\.)" + @"@[a-z0-9][\w\.-]*[a-z0-9]\.[a-z][a-z\.]*[a-z]$";
        return String.IsNullOrEmpty(email) || !Regex.IsMatch(user.Email, EmailPattern, RegexOptions.IgnoreCase);
    }
}razor

igc-switch {
    margin: 0.5rem;
}

igc-button {
    margin-top: 1rem;
}
css

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

Blazor ステッパーを使用した作業の開始

// in Program.cs file

builder.Services.AddIgniteUIBlazor(
    typeof(IgbStepperModule)
);
razor

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

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

これで、Blazor IgbStepper とそのパネルの基本構成から始めることができます。

Blazor ステッパーの使用方法

IgbStep は、IgbStepper に属するすべてのステップの表現です。ステップは Invalid、Active、Optional、Disabled、Complete プロパティを提供し、ビジネス要件に応じてステップの状態を構成できます。

Blazor ステッパーの宣言

ステップは、以下の方法のいずれかを使用して宣言できます。

データセットの繰り返し

<IgbStepper>
    @foreach (var item in this.StepsData)
    {
        <IgbStep Disabled="@item.Disabled">
          <p slot="title">@item.Title</p>
        </IgbStep>
    }
</IgbStepper>
razor

静的ステップの作成

<IgbStepper>
    <IgbStep>
       <p slot="title">Step 1</p>
    </IgbStep>
     <IgbStep>
       <p slot="title">Step 2</p>
    </IgbStep>
</IgbStepper>
razor

各ステップで、Indicator、Title、および Subtitle スロットを使用してインジケーター、タイトル、およびサブタイトルを構成できます。

Default の IgbStep スロットは、ステップのコンテンツを描画します。

<IgbStepper>
    <IgbStep>
       <IgbIcon slot="indicator" IconName="home" Collection="material" />
       <p slot="title">Home</p>
       <p slot="subtitle">Home Sub Title</p>
       <div>
          Step Content
          ...
       </div>
    </IgbStep>
</IgbStepper>
razor

Blazor ステッパーの向きの変更

公開された Orientation プロパティでステッパーの向きをカスタマイズできます。horizontal (デフォルト値) また vertical に設定できます。

水平方向の Blazor ステッパー

IgbStepper の orientation プロパティのデフォルト値は horizontal です。 Blazor ステッパーが水平方向の場合、ステップのコンテンツをステップのヘッダーの上または下に表示するかどうかを決定できます。これは、IgbStepper の ContentTop ブール型プロパティを設定することで実現できます。デフォルト値は false です。有効な場合、ステップのコンテンツはステップのヘッダーの上に表示されます。

垂直方向の Blazor ステッパー

水平レイアウトから垂直レイアウトに簡単に切り替えることができます。デフォルトの方向を変更するには、Orientation プロパティを vertical に設定します。

以下のサンプルは、実行時にステッパーの向きとタイトルの位置を変更する方法を示しています。

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;

// required for registering IgniteUIBlazor
using IgniteUI.Blazor.Controls;

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            // registering Infragistics Blazor
            builder.Services.AddIgniteUIBlazor(typeof(IgbStepperModule),
               typeof(IgbRadioGroupModule),
               typeof(IgbRadioModule),
               typeof(IgbButtonModule));

            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<style>
.radio-groups {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.radio-group {
    margin-right: 2rem;
}

.radio-group-container {
    padding: 0.5rem;
    border: 1px solid gainsboro;
}
</style>
<div class="container vertical">
   <div class="radio-groups">
        <div class="radio-group">
            <label>Title position</label>
            <div class="radio-group-container">
                <IgbRadioGroup Alignment="ContentOrientation.Horizontal">
                    <IgbRadio name="alignment" Value="top" Change="onTitlePositionChange">Top</IgbRadio>
                    <IgbRadio name="alignment" Value="bottom" Change="onTitlePositionChange">Bottom</IgbRadio>
                    <IgbRadio name="alignment" Value="start" Change="onTitlePositionChange">Start</IgbRadio>
                    <IgbRadio name="alignment" Value="end" Change="onTitlePositionChange">End</IgbRadio>
                    <IgbRadio name="alignment" Value="" Checked="true" Change="onTitlePositionChange">Default</IgbRadio>
                </IgbRadioGroup>
            </div>
        </div>

        <div class="radio-group">
            <label>Orientation</label>
            <div class="radio-group-container">
                <IgbRadioGroup Alignment="ContentOrientation.Horizontal">
                    <IgbRadio name="orientation" Value="horizontal" Checked="true" Change="onOrientationChange">Horizontal</IgbRadio>
                    <IgbRadio name="orientation" Value="vertical" Change="onOrientationChange">Vertical</IgbRadio>
                </IgbRadioGroup>
            </div>
        </div>
   </div>

   <IgbStepper Name="stepper" @ref="stepper" Orientation="@Orientation">
        <IgbStep>
            <span slot="title">Order</span>
             <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Next">NEXT</IgbButton>

        </IgbStep>
        <IgbStep>
            <span slot="title">Payment</span>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Previous">PREVIOUS</IgbButton>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Next">NEXT</IgbButton>
        </IgbStep>
        <IgbStep>
            <span slot="title">Confirmation</span>
                 <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Previous">PREVIOUS</IgbButton>
                 <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Reset">RESET</IgbButton>
        </IgbStep>
    </IgbStepper>
</div>

@code {
    
    public IgbStepper stepper;
    public StepperOrientation Orientation = StepperOrientation.Horizontal;
    public StepperTitlePosition TitlePosition;

    private bool IsDefaultTitlePosition;

    public void onTitlePositionChange(IgbRadioChangeEventArgs args)
    {
        if(args.Detail.Checked)
        {
            string value = (args.Parent as IgbRadio).Value.ToString();
            if (String.IsNullOrEmpty(value))
            {
                IsDefaultTitlePosition = true;
                setDefaultTitleOrientation(stepper.Orientation);

            } else
            {
                IsDefaultTitlePosition = false;
                stepper.TitlePosition = (StepperTitlePosition)System.Enum.Parse(typeof(StepperTitlePosition), value, true);
            }
        }
    }

    public void onOrientationChange(IgbRadioChangeEventArgs args)
    {
        if(args.Detail.Checked)
        {
            string value = (args.Parent as IgbRadio).Value.ToString();
            Orientation = (StepperOrientation)System.Enum.Parse(typeof(StepperOrientation), value, true);

            if (IsDefaultTitlePosition)
                setDefaultTitleOrientation(Orientation);

        }
    }

    public void Previous()
    {
        this.stepper.Prev();
    }

    public void Next()
    {
        this.stepper.Next();
    }

    public void Reset()
    {
        this.stepper.Reset();
    }

    private void setDefaultTitleOrientation(StepperOrientation orientation)
    {
        if( orientation == StepperOrientation.Horizontal )
        {
            stepper.TitlePosition = StepperTitlePosition.Bottom;
        } else {
            stepper.TitlePosition = StepperTitlePosition.End;
        }
    }
}razor

.radio-groups {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.radio-group {
    margin-right: 2rem;
}

.radio-group-container {
    padding: 0.5rem;
    border: 1px solid gainsboro;
}
css

ステップ状態

Blazor IgbStepper は 5 つのステップ状態をサポートし、それぞれがデフォルトで異なるスタイルを適用します。

active - ステップが現在表示されているかどうかを決定します。設計上、ユーザーが明示的にステップの active 属性を true に設定しない場合、最初の有効なステップがアクティブになります。
disabled - ステップが操作可能かどうかを決定します。デフォルトでは、ステップの disabled 属性は false に設定されています。
invalid - ステップが有効かどうかを決定します。その値に基づいて、ユーザーがリニアステッパーモードで前に進むことができるかどうかが決定されます。デフォルト値は false です。
optional - デフォルトで、ステップの optional 属性は false に設定されます。リニアステッパーのステップの有効性が必要ない場合、オプションの属性を有効にして、ステップの有効性とは関係なく前進できます。
complete - デフォルトでは、ステップの complete 属性は false を返します。ユーザーは、complete 属性を必要に応じて設定することにより、このデフォルトの complete 動作をオーバーライドできます。ステップが complete (完了済み) としてマークされると、ステップヘッダーのスタイルがデフォルトで変更されるだけでなく、完了したステップと次のステップの間の進捗線のスタイルも変更されます。

リニア Blazor ステッパー

Blazor IgbStepper は、Linear プロパティを使用してステップフローを設定できます。デフォルトで、linear は false に設定され、ユーザーは IgbStepper で無効にされていないステップを選択できます。

<IgbStepper Linear="true">
    <IgbStep>
       <p slot="title">Step 1</p>
    </IgbStep>
     <IgbStep>
       <p slot="title">Step 2</p>
    </IgbStep>
</IgbStepper>
razor

linear プロパティが true に設定されている場合、ステッパーは次のステップに進む前に現在のオプションではないステップを有効にする必要があります。

現在のオプションではないステップが有効でない場合、現在のステップを検証するまで次のステップに進むことができません。

オプションのステップの有効性は考慮されません。

ステップ操作

IgbStepper は、ステップ操作に以下の API メソッドを提供します。

navigateTo – 指定したインデックスでステップをアクティブ化します。
next - 次の無効化されていないステップをアクティブ化します。
prev – 前の無効化されていないステップをアクティブ化します。
reset – ステッパーを初期状態にリセットします。

reset メソッドは、ステッパーを初期状態にリセットします。つまり、最初のステップをアクティブにします。reset メソッドはステップの内容をクリアしません。これは手動で行う必要があります。

ステップのカスタマイズ

Ignite UI for Blazor ステッパーでは、タイトル、インジケーターなどのさまざまなオプションを構成できます。

これは、IgbStepper の StepType プロパティで実現できます。プロパティは以下の値を含みます:

Full (フル、デフォルト値)
Indicator (インジケーター)
Title (タイトル)

Full (フル)

タイトルとサブタイトルが定義されている場合、この設定ではインジケーターとタイトルの両方が描画されます。

また、ユーザーはステップのタイトルの位置を定義できるため、ステップインジケーターの前、後、上、または下に配置できます。ユーザーは TitlePosition プロパティを使用してタイトル位置を構成できます。プロパティは以下の値を含みます:

undefined (デフォルト値)
end
start
bottom
top

Blazor IgbStepper が水平方向で、タイトルの位置が定義されていない場合、タイトルはインジケーターの下に表示されます。

向きが垂直に設定され、タイトルの位置が定義されていない場合、タイトルはインジケーターの後に表示されます。

titlePosition プロパティは、ステッパーの stepType プロパティが full に設定されている場合にのみ適用できます。

Indicator (インジケーター)

ステップのインジケーターのみを表示する場合は、stepType オプションを indicator に設定します。

ステップインジケーターはすべてのコンテンツをサポートしますが、サイズが常に 24 ピクセルになるという制限があります。この点に注意して、ステップインジケーターとして IgbIcon または IgbAvatar を使用することをお勧めします。

Title (タイトル)

ステップのタイトルのみを表示する場合は、stepType オプションを title に設定します。

このように、サブタイトルが定義されている場合、それらもステップタイトルの下に描画されます。

このコンテナーは、サイズ制限なしで要件に応じて再テンプレート化できます。たとえば、サイズが 24 ピクセルより大きいインジケーターを中に追加できます。

以下のサンプルは公開されたすべてのステップタイプと変更方法を示しています。

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;

// required for registering IgniteUIBlazor
using IgniteUI.Blazor.Controls;

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            // registering Infragistics Blazor
            builder.Services.AddIgniteUIBlazor(typeof(IgbStepperModule),
               typeof(IgbRadioGroupModule),
               typeof(IgbRadioModule));

            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<style>
.radio-group-container {
    width: fit-content;
    padding: 0.5rem;
    border: 1px solid gainsboro;
    margin-bottom: 1rem;
}
</style>
<div class="container vertical">
   <label>Step type</label>
   <div class="radio-group-container">
        <IgbRadioGroup Alignment="ContentOrientation.Horizontal">
            <IgbRadio name="type" Value="indicator" Change="onStepTypeChange">Indicator</IgbRadio>
            <IgbRadio name="type" Value="title" Change="onStepTypeChange">Title</IgbRadio>
            <IgbRadio name="type" Value="full" Checked="true" Change="onStepTypeChange">Full</IgbRadio>
        </IgbRadioGroup>
   </div>

   <IgbStepper Name="stepper" @ref="stepper">
        <IgbStep>
            <span slot="title">Pricing Plan</span>
        </IgbStep>
        <IgbStep>
            <span slot="title">Car Details</span>
        </IgbStep>
        <IgbStep>
            <span slot="title">Payment</span>
        </IgbStep>
   </IgbStepper>
</div>

@code {
    
    public IgbStepper stepper;

    public void onStepTypeChange(IgbRadioChangeEventArgs args)
    {
        if(args.Detail.Checked)
        {
            string value = (args.Parent as IgbRadio).Value.ToString();
            stepper.StepType = (StepperStepType)System.Enum.Parse(typeof(StepperStepType), value, true);
        }
    }
}razor

.radio-group-container {
    width: fit-content;
    padding: 0.5rem;
    border: 1px solid gainsboro;
    margin-bottom: 1rem;
}
css

Stepper のアニメーション

Blazor の IgbStepper のアニメーションにより、エンドユーザーは、定義されたステップを操作しているときに美しいユーザー操作体験を得ることができます。使用可能なアニメーションオプションは、ステッパーの向きによって異なります。

ステッパーが水平方向の場合、デフォルトでは slide アニメーションを使用するように設定されています。その他に fade アニメーションもサポートされます。アニメーションは、HorizontalAnimation 入力を介して構成されます。

垂直方向のレイアウトでは、アニメーションタイプは VerticalAnimation プロパティを使用して定義できます。デフォルトでは、その値は grow に設定されており、ユーザーはそれを fade に設定することもできます。

両方のアニメーションタイプ入力に none を設定すると、ステッパーアニメーションが無効になります。

IgbStepper コンポーネントを使用すると、ステップ間の遷移にかかる時間を設定することもできます。これは、数値を受け取る animationDuration プロパティで設定でき、いずれのレイアウト方向でも共通の設定です。デフォルト値は 320ms に設定されています。

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;

// required for registering IgniteUIBlazor
using IgniteUI.Blazor.Controls;

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            // registering Infragistics Blazor
            builder.Services.AddIgniteUIBlazor(typeof(IgbStepperModule),
                typeof(IgbRadioGroupModule),
                typeof(IgbRadioModule),
                typeof(IgbInputModule),
                typeof(IgbSwitchModule),
                typeof(IgbButtonModule));

            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<style>
.settings {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.125rem;
    background: hsl(var(--ig-gray-100));
    padding: 1.125rem;
    border: 1px solid hsl(var(--ig-gray-300));
    border-radius: .25rem;
    margin-bottom: 2rem;
}

igc-button {
    margin: 1rem 0.5rem 0 0;
}
</style>
<div class="container sample">
    <article class="settings">
        <IgbSelect Label="Orienation" Change="OrientationChange">
            <IgbSelectItem Value="Horizontal" Selected="true">Horizontal</IgbSelectItem>
            <IgbSelectItem Value="Vertical">Vertical</IgbSelectItem>
        </IgbSelect>
        <IgbSelect Label="Vertical Animation" Change="VerticalAnimationChange">
            <IgbSelectItem Value="Grow" Selected="true">Grow</IgbSelectItem>
            <IgbSelectItem Value="Fade">Fade</IgbSelectItem>
            <IgbSelectItem Value="None">None</IgbSelectItem>
        </IgbSelect>
        <IgbSelect Label="Horizontal Animation" Change="HorizontalAnimationChange">
            <IgbSelectItem Value="Slide" Selected="true">Slide</IgbSelectItem>
            <IgbSelectItem Value="Fade">Fade</IgbSelectItem>
            <IgbSelectItem Value="None">None</IgbSelectItem>
        </IgbSelect>
        <IgbInput DisplayType=InputType.Number Value="320" Label="Duration" Change="AnimationDurationChange">
            <span slot="suffix">ms</span>
        </IgbInput>
    </article>
    <IgbStepper @ref="stepper">
        <IgbStep>
            <span slot="title">Personal Info</span>
            <IgbInput DisplayType=InputType.Text Label="Full Name"></IgbInput>
            <IgbInput DisplayType=InputType.Email Label="Email"></IgbInput>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Next">NEXT</IgbButton>
        </IgbStep>
        <IgbStep>
            <span slot="title">Delivery address</span>
            <IgbInput DisplayType=InputType.Text Label="City"></IgbInput>
            <IgbInput DisplayType=InputType.Text Label="Street"></IgbInput>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Previous">PREVIOUS</IgbButton>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Next">NEXT</IgbButton>
        </IgbStep>
        <IgbStep>
            <span slot="title">Payment</span>
            <IgbRadioGroup>
                <IgbRadio name="payment" Value="paypal" Checked="true">PayPal (n@mail.com; 18/02/2021)</IgbRadio>
                <IgbRadio name="payment" Value="visa">Visa (**** **** **** 1234; 12/23)</IgbRadio>
                <IgbRadio name="payment" Value="mastercard">MasterCard (**** **** **** 5678; 12/24)</IgbRadio>
            </IgbRadioGroup>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Previous">PREVIOUS</IgbButton>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Next">SUBMIT</IgbButton>
        </IgbStep>
        <IgbStep>
            <span slot="title">Delivery status</span>
            <p>Your order is on its way. Expect delivery on 25th September 2021. Delivery address: San Jose, CA 94243.</p>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Previous">PREVIOUS</IgbButton>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Reset">RESET</IgbButton>
        </IgbStep>
    </IgbStepper>
</div>

@code {
    
    private IgbStepper stepper;

    public void Previous()
    {
        this.stepper.Prev();
    }

    public void Next()
    {
        this.stepper.Next();
    }

    public void Reset()
    {
        this.stepper.Reset();
    }

    public void OrientationChange(IgbSelectItemComponentEventArgs args)
    {
        StepperOrientation orientation = Enum.Parse<StepperOrientation>(args.Detail.Value);
        this.stepper.Orientation = orientation;
    }

    public void VerticalAnimationChange(IgbSelectItemComponentEventArgs args)
    {
        StepperVerticalAnimation animation = Enum.Parse<StepperVerticalAnimation>(args.Detail.Value);
        this.stepper.VerticalAnimation = animation;
    }

    public void HorizontalAnimationChange(IgbSelectItemComponentEventArgs args)
    {
        HorizontalTransitionAnimation animation = Enum.Parse<HorizontalTransitionAnimation>(args.Detail.Value);
        this.stepper.HorizontalAnimation = animation;
    }

    public void AnimationDurationChange(IgbComponentValueChangedEventArgs args)
    {
        double duration;
        double.TryParse(args.Detail.ToString(), out duration);
        this.stepper.AnimationDuration = duration;
    }
}razor

.settings {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.125rem;
    background: hsl(var(--ig-gray-100));
    padding: 1.125rem;
    border: 1px solid hsl(var(--ig-gray-300));
    border-radius: .25rem;
    margin-bottom: 2rem;
}

igc-button {
    margin: 1rem 0.5rem 0 0;
}
css

キーボードナビゲーション

Ignite UI for Blazor ステッパーは、さまざまなキーボード操作をエンドユーザーに提供します。この機能はデフォルトで有効になっており、エンドユーザーは簡単にステップを移動できます。 Blazor IgbStepper ナビゲーションは W3 アクセシビリティ標準に準拠しており、便利に使用できます。

キーの組み合わせ

Tab - 次の移動可能な要素にフォーカスを移動します。
Shift + Tab - 前移動可能な要素にフォーカスを移動します。
↓ - ステッパーが垂直方向の場合、次のアクセス可能なステップのヘッダーにフォーカスを移動します。
↑ - ステッパーが垂直方向の場合、前のアクセス可能なステップのヘッダーにフォーカスを移動します。
← - 両方の方向で前のアクセス可能なステップのヘッダーにフォーカスを移動します。
→ - 両方の方向で次にアクセス可能なステップのヘッダーにフォーカスを移動します。
Home - ステッパーの最初の有効なステップのヘッダーにフォーカスを移動します。
End - ステッパーの最後の有効なステップのヘッダーにフォーカスを移動します。
Enter / Space - 現在フォーカスされているステップをアクティブ化します。

スタイル設定

以下にリストされている公開された CSS パーツのいくつかを使用して、IgbStep の外観を変更できます:

パーツ名	説明
`header-container`	ステップのヘッダーとそのセパレーターのラッパー。
`disabled`	使用不可な状態を示します。ヘッダーコンテナーに適用されます。
`complete-start`	現在のステップの完了状態を示します。ヘッダーコンテナーに適用されます。
`complete-end`	前のステップの完了状態を示します。ヘッダーコンテナーに適用されます。
`optional`	オプションの状態を示します。ヘッダーコンテナーに適用されます。
`invalid`	オプションの状態を示します。ヘッダーコンテナーに適用されます。
`top`	タイトルがインジケーターの上にあることを示します。ヘッダーコンテナーに適用されます。
`bottom`	タイトルがインジケーターの下にあることを示します。ヘッダーコンテナーに適用されます。
`start`	タイトルがインジケーターの前にあることを示します。ヘッダーコンテナーに適用されます。
`end`	タイトルがインジケーターの後にあることを示します。ヘッダーコンテナーに適用されます。
`header`	ステップのインジケーターとテキストのラッパー。
`indicator`	Tステップのインジケーター。
`text`	ステップのタイトルとサブタイトルのラッパー。
`empty`	ステップにタイトルとサブタイトルが提供されていないことを示します。テキストに適用されます。
`title`	ステップのタイトル。
`subtitle`	ステップのサブタイトル。
`body`	ステップのコンテンツのラッパー。
`content`	ステップのコンテンツ。

これらの CSS パーツを使用して、次のように IgbStepper コンポーネントの外観をカスタマイズできます:

igc-step::part(title) {
  color: var(--ig-primary-500);
}
igc-step[active]::part(indicator) {
  background-color: var(--ig-primary-500);
}
igc-step::part(indicator) {
  background-color: var(--ig-surface-500);
}
css

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;

// required for registering IgniteUIBlazor
using IgniteUI.Blazor.Controls;

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            // registering Infragistics Blazor
            builder.Services.AddIgniteUIBlazor(typeof(IgbStepperModule),
                typeof(IgbRadioGroupModule),
                typeof(IgbRadioModule),
                typeof(IgbInputModule),
                typeof(IgbSwitchModule),
                typeof(IgbButtonModule));

            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<style>
.settings {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.125rem;
    background: hsl(var(--ig-gray-100));
    padding: 1.125rem;
    border: 1px solid hsl(var(--ig-gray-300));
    border-radius: .25rem;
    margin-bottom: 2rem;
  }

  :root {
    --color-teal: rgba(77, 182, 172, 1);
    --color-dark-navy: rgba(26, 35, 126, 1);
    --color-aqua-gray: rgba(208, 236, 236, 1);
    --color-white: rgba(255, 255, 255, 1);

    --color-teal-hover: rgba(26, 35, 126, 1);
    --color-teal-shadow: rgba(77, 182, 172, 0.5);
  }

  igc-button::part(base) {
    margin: 1rem 0.5rem 0 0;
    background-color: var(--color-teal);
    color: var(--color-white);
    font-weight: 600;
    transition: background-color 0.25s ease, transform 0.1s ease;
  }

  igc-button:hover::part(base) {
    background-color: var(--color-dark-navy);
  }

  igc-button:active::part(base) {
    transform: scale(0.96);
  }

  igc-step::part(title) {
    color: var(--color-dark-navy);
    font-variant: small-caps;
    font-weight: bold;
  }

  igc-step::part(indicator) {
    border-radius: 12px 6px 12px 6px;
    background-color: var(--color-aqua-gray);
    color: var(--color-dark-navy);
    transition: all 0.2s ease;
  }

  igc-step[active]::part(indicator) {
    background-color: var(--color-teal);
    box-shadow: 0 2px 8px var(--color-teal-shadow);
    transform: scale(1.04);
  }

  igc-step[active]:active::part(indicator) {
    transform: scale(1.08);
  }
</style>
<div class="container sample">
    <article class="settings">
        <IgbSelect Label="Orienation" Change="OrientationChange">
            <IgbSelectItem Value="Horizontal" Selected="true">Horizontal</IgbSelectItem>
            <IgbSelectItem Value="Vertical">Vertical</IgbSelectItem>
        </IgbSelect>
        <IgbSelect Label="Vertical Animation" Change="VerticalAnimationChange">
            <IgbSelectItem Value="Grow" Selected="true">Grow</IgbSelectItem>
            <IgbSelectItem Value="Fade">Fade</IgbSelectItem>
            <IgbSelectItem Value="None">None</IgbSelectItem>
        </IgbSelect>
        <IgbSelect Label="Horizontal Animation" Change="HorizontalAnimationChange">
            <IgbSelectItem Value="Slide" Selected="true">Slide</IgbSelectItem>
            <IgbSelectItem Value="Fade">Fade</IgbSelectItem>
            <IgbSelectItem Value="None">None</IgbSelectItem>
        </IgbSelect>
        <IgbInput DisplayType=InputType.Number Value="320" Label="Duration" Change="AnimationDurationChange">
            <span slot="suffix">ms</span>
        </IgbInput>
    </article>
    <IgbStepper @ref="stepper">
        <IgbStep>
            <span slot="title">Personal Info</span>
            <IgbInput DisplayType=InputType.Text Label="Full Name"></IgbInput>
            <IgbInput DisplayType=InputType.Email Label="Email"></IgbInput>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Next">NEXT</IgbButton>
        </IgbStep>
        <IgbStep>
            <span slot="title">Delivery address</span>
            <IgbInput DisplayType=InputType.Text Label="City"></IgbInput>
            <IgbInput DisplayType=InputType.Text Label="Street"></IgbInput>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Previous">PREVIOUS</IgbButton>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Next">NEXT</IgbButton>
        </IgbStep>
        <IgbStep>
            <span slot="title">Payment</span>
            <IgbRadioGroup>
                <IgbRadio name="payment" Value="paypal" Checked="true">PayPal (n@mail.com; 18/02/2021)</IgbRadio>
                <IgbRadio name="payment" Value="visa">Visa (**** **** **** 1234; 12/23)</IgbRadio>
                <IgbRadio name="payment" Value="mastercard">MasterCard (**** **** **** 5678; 12/24)</IgbRadio>
            </IgbRadioGroup>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Previous">PREVIOUS</IgbButton>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Next">SUBMIT</IgbButton>
        </IgbStep>
        <IgbStep>
            <span slot="title">Delivery status</span>
            <p>Your order is on its way. Expect delivery on 25th September 2021. Delivery address: San Jose, CA 94243.</p>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Previous">PREVIOUS</IgbButton>
            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Reset">RESET</IgbButton>
        </IgbStep>
    </IgbStepper>
</div>

@code {
    
    private IgbStepper stepper;

    public void Previous()
    {
        this.stepper.Prev();
    }

    public void Next()
    {
        this.stepper.Next();
    }

    public void Reset()
    {
        this.stepper.Reset();
    }

    public void OrientationChange(IgbSelectItemComponentEventArgs args)
    {
        StepperOrientation orientation = Enum.Parse<StepperOrientation>(args.Detail.Value);
        this.stepper.Orientation = orientation;
    }

    public void VerticalAnimationChange(IgbSelectItemComponentEventArgs args)
    {
        StepperVerticalAnimation animation = Enum.Parse<StepperVerticalAnimation>(args.Detail.Value);
        this.stepper.VerticalAnimation = animation;
    }

    public void HorizontalAnimationChange(IgbSelectItemComponentEventArgs args)
    {
        HorizontalTransitionAnimation animation = Enum.Parse<HorizontalTransitionAnimation>(args.Detail.Value);
        this.stepper.HorizontalAnimation = animation;
    }

    public void AnimationDurationChange(IgbComponentValueChangedEventArgs args)
    {
        double duration;
        double.TryParse(args.Detail.ToString(), out duration);
        this.stepper.AnimationDuration = duration;
    }
}razor

.settings {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.125rem;
    background: hsl(var(--ig-gray-100));
    padding: 1.125rem;
    border: 1px solid hsl(var(--ig-gray-300));
    border-radius: .25rem;
    margin-bottom: 2rem;
  }
  
  :root {
    --color-teal: rgba(77, 182, 172, 1);
    --color-dark-navy: rgba(26, 35, 126, 1);
    --color-aqua-gray: rgba(208, 236, 236, 1);
    --color-white: rgba(255, 255, 255, 1);
  
    --color-teal-hover: rgba(26, 35, 126, 1);
    --color-teal-shadow: rgba(77, 182, 172, 0.5);
  }
  
  igc-button::part(base) {
    margin: 1rem 0.5rem 0 0;
    background-color: var(--color-teal);
    color: var(--color-white);
    font-weight: 600;
    transition: background-color 0.25s ease, transform 0.1s ease;
  }
  
  igc-button:hover::part(base) {
    background-color: var(--color-dark-navy);
  }
  
  igc-button:active::part(base) {
    transform: scale(0.96);
  }
  
  igc-step::part(title) {
    color: var(--color-dark-navy);
    font-variant: small-caps;
    font-weight: bold;
  }
  
  igc-step::part(indicator) {
    border-radius: 12px 6px 12px 6px;
    background-color: var(--color-aqua-gray);
    color: var(--color-dark-navy);
    transition: all 0.2s ease;
  }
  
  igc-step[active]::part(indicator) {
    background-color: var(--color-teal);
    box-shadow: 0 2px 8px var(--color-teal-shadow);
    transform: scale(1.04);
  }
  
  igc-step[active]:active::part(indicator) {
    transform: scale(1.08);
  }css

Blazor Stepper (ステッパー) の概要

Blazor ステッパーの例

Blazor ステッパーを使用した作業の開始

Blazor ステッパーの使用方法

Blazor ステッパーの宣言

Blazor ステッパーの向きの変更

ステップ状態

リニア Blazor ステッパー

ステップ操作

ステップのカスタマイズ

Stepper のアニメーション

キーボードナビゲーション

スタイル設定

API リファレンス

その他のリソース

Blazor Stepper (ステッパー) の概要

Blazor ステッパーの例

Blazor ステッパーを使用した作業の開始

Blazor ステッパーの使用方法

Blazor ステッパーの宣言

Blazor ステッパーの向きの変更

ステップ状態

リニア Blazor ステッパー

ステップ操作

ステップのカスタマイズ

Stepper のアニメーション

キーボード ナビゲーション

スタイル設定

API リファレンス

その他のリソース

キーボードナビゲーション