diff --git a/blazor/stepper/accessibility.md b/blazor/stepper/accessibility.md index af02225aee..f024eca045 100644 --- a/blazor/stepper/accessibility.md +++ b/blazor/stepper/accessibility.md @@ -7,10 +7,9 @@ control: Stepper documentation: ug --- -# Accessibility in Blazor Stepper component - -The Blazor Stepper component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +# Accessibility in Blazor Stepper Component +The Blazor Stepper component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and commonly used [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) for evaluating accessibility. The accessibility compliance for the Blazor Stepper component is outlined below. | Accessibility Criteria | Compatibility | @@ -37,7 +36,7 @@ The accessibility compliance for the Blazor Stepper component is outlined below.
No - The component does not meet the requirement.
-## WAI-ARIA attributes +## WAI-ARIA Attributes The following ARIA attributes are used in the Stepper component: @@ -47,7 +46,7 @@ The following ARIA attributes are used in the Stepper component: | `aria-current` | Attribute denotes the currently active step in the Stepper. | | `aria-disabled`| Indicates when the step is disabled and cannot be interacted. | -## Keyboard interaction +## Keyboard Interaction The following keyboard shortcuts are supported by the Stepper component. @@ -61,12 +60,12 @@ The following keyboard shortcuts are supported by the Stepper component. | End | End | Focuses on the last step of the Stepper. | | Enter / Space | Enter / Space | Activates the currently focused step. | -## Ensuring accessibility +## Ensuring Accessibility The Blazor Stepper component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. The accessibility compliance of the Blazor Stepper component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/stepper) in a new window to evaluate the accessibility of the Blazor Stepper component with accessibility tools. -## See also +## See Also * [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file diff --git a/blazor/stepper/animation.md b/blazor/stepper/animation.md index bf2197362f..eed27b8c7e 100644 --- a/blazor/stepper/animation.md +++ b/blazor/stepper/animation.md @@ -9,9 +9,9 @@ documentation: ug # Animation in Blazor Stepper Component -The Stepper progress state can be animated, smoothly transitioning from one step to another. You can customize the animation's `Duration` and `Delay` by using the [StepperAnimationSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperAnimationSettings.html) tag directive. +The Stepper progress state can be animated, smoothly transitioning from one step to another. Customize the animation's `Duration` and `Delay` using the [StepperAnimationSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperAnimationSettings.html) tag directive. -You can disable the animation by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperAnimationSettings.html#Syncfusion_Blazor_Navigations_StepperAnimationSettings_Enable) property to `false`. By default, the value is `true`. +Animation can be disabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperAnimationSettings.html#Syncfusion_Blazor_Navigations_StepperAnimationSettings_Enable) property to `false`. By default, its value is `true`. | Fields | Type | Description | |------|------|-------------| @@ -33,4 +33,6 @@ The example demonstrates the animation `Duration` and `Delay` settings for the S ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNryiZNaAbXodbvt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Stepper Component with Animation](./images/Blazor-animation.png) \ No newline at end of file diff --git a/blazor/stepper/getting-started-webapp.md b/blazor/stepper/getting-started-webapp.md index c96c2eca95..2bdd524cbb 100644 --- a/blazor/stepper/getting-started-webapp.md +++ b/blazor/stepper/getting-started-webapp.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started with Syncfusion Stepper Component in Blazor Web App +title: Getting Started with Blazor Stepper in Blazor Web App | Syncfusion description: Check out the documentation for getting started with Syncfusion Blazor Stepper Components in Blazor Web App. platform: Blazor control: Stepper @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Stepper in Blazor Web App -This section briefly explains about how to include [Blazor Stepper](https://www.syncfusion.com/blazor-components/blazor-stepper) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to integrate the Syncfusion [Blazor Stepper](https://www.syncfusion.com/blazor-components/blazor-stepper) component into a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -19,19 +19,19 @@ This section briefly explains about how to include [Blazor Stepper](https://www. * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio +## Create a New Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating a Blazor Web Application. ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App To add **Blazor Stepper** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If `WebAssembly` or `Auto` render modes are utilized in the Blazor Web App, Syncfusion® Blazor component NuGet packages must be installed within the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, the Package Manager Console can be used to install the required NuGet package {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -52,11 +52,11 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio Code +## Create a New Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Alternatively, the Package Manager Console can be used to install the required NuGet package [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating a Blazor Web Application. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -74,10 +74,10 @@ N> For more information on creating a **Blazor Web App** with various interactiv ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If `WebAssembly` or `Auto` render modes are utilized in the Blazor Web App, Syncfusion® Blazor component NuGet packages must be installed within the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. +* Ensure the current directory is the project root where the `.csproj` file is located. * Run the following command to install a [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **Program.cs** files of the Blazor Web App (`server` and `client` projects). {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is set to `Server`, the project will contain a single **~/Program.cs** file. Register the Syncfusion® Blazor Service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -173,7 +173,7 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Stylesheet and Script Resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -189,7 +189,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in a Blazor application. ## Add Syncfusion® Blazor Stepper component @@ -233,9 +233,9 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% previewsample "https://blazorplayground.syncfusion.com/embed/BNBTDCKZfTxNJwlE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stepper Component](images/blazor-stepper-component.png)" %} -## Configure icon and label +## Configure Icon and Label -You can define the step icon and label by setting the `IconCss` and `Label` properties using `StepperStep` tag directive. +Define the step icon and label by setting the `IconCss` and `Label` properties within the `StepperStep` tag directive. {% tabs %} {% highlight razor %} diff --git a/blazor/stepper/getting-started.md b/blazor/stepper/getting-started.md index 21f84d1165..27c1bdb59b 100644 --- a/blazor/stepper/getting-started.md +++ b/blazor/stepper/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor Stepper Component -This section briefly explains about how to include [Blazor Stepper](https://www.syncfusion.com/blazor-components/blazor-stepper) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to integrate the Syncfusion [Blazor Stepper](https://www.syncfusion.com/blazor-components/blazor-stepper) component into a Blazor WebAssembly App using Visual Studio and Visual Studio Code. -To get started quickly with Blazor Stepper component, check on the following video: +To get started quickly with the Blazor Stepper component, watch the following video: {% youtube "youtube:https://www.youtube.com/watch?v=JRsM_x7vtyE" %} @@ -24,13 +24,13 @@ To get started quickly with Blazor Stepper component, check on the following vid * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio +## Create a New Blazor WebAssembly App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App -To add **Blazor Stepper** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add **Blazor Stepper** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager Console command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -51,11 +51,11 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio Code +## Create a New Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`). {% tabs %} @@ -71,7 +71,7 @@ cd BlazorApp ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. +* Ensure the current directory is the project root where the `.csproj` file is located. * Run the following command to install a [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -127,7 +127,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Stylesheet and Script Resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. @@ -138,7 +138,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in a Blazor application. ## Add Syncfusion® Blazor Stepper component @@ -164,9 +164,9 @@ Add the Syncfusion® Blazor Stepper componen {% previewsample "https://blazorplayground.syncfusion.com/embed/BNBTDCKZfTxNJwlE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stepper Component](images/blazor-stepper-component.png)" %} -## Configure icon and label +## Configure Icon and Label -You can define the step icon and label by setting the `IconCss` and `Label` properties using `StepperStep` tag directive. +Define the step icon and label by setting the `IconCss` and `Label` properties within the `StepperStep` tag directive. {% tabs %} {% highlight razor %} diff --git a/blazor/stepper/linear-flow.md b/blazor/stepper/linear-flow.md index 5d42af2e66..0b81b0a1ee 100644 --- a/blazor/stepper/linear-flow.md +++ b/blazor/stepper/linear-flow.md @@ -7,11 +7,13 @@ control: Stepper documentation: ug --- -# Linear flow in Blazor Stepper Component +# Linear Flow in Blazor Stepper Component -The Stepper component enables users to progress sequentially through each step, ensuring navigation from one step to the next in a linear way by setting the [Linear](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_Linear) property to `true`. The default value is `false` allowing navigation between any steps and vice versa. +The Stepper component enables users to progress sequentially through each step by setting the [`Linear`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_Linear) property to `true`. This ensures navigation occurs strictly from one step to the next. -The example demonstrates the functionality of both linear and non-linear flow in the Stepper. +By default, the `Linear` property is `false`, which allows navigation between any steps, enabling non-sequential progression. + +The following example demonstrates the functionality of linear flow in the Stepper. ```cshtml @@ -67,4 +69,6 @@ The example demonstrates the functionality of both linear and non-linear flow in ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVoiZtOqPJNVbuC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Stepper Component with Linear Flow](./images/Blazor-linear.png) \ No newline at end of file diff --git a/blazor/stepper/orientations.md b/blazor/stepper/orientations.md index e927eb72b6..ed4a7f946b 100644 --- a/blazor/stepper/orientations.md +++ b/blazor/stepper/orientations.md @@ -9,11 +9,11 @@ documentation: ug # Orientations in Blazor Stepper Component -The Stepper component supports the display of steps in both horizontal and vertical orientations by using the [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_Orientation) property. +The Stepper component supports displaying steps in both horizontal and vertical orientations using the [`Orientation`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_Orientation) property. ## Horizontal -In horizontal orientation, the steps are displayed in a side-by-side manner by setting the [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_Orientation) property to `Horizontal`. By default, the steps are displayed in the horizontal orientation. +In horizontal orientation, steps are displayed side-by-side by setting the [`Orientation`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_Orientation) property to `Horizontal`. By default, steps are displayed in a horizontal orientation. ```cshtml @@ -57,11 +57,13 @@ In horizontal orientation, the steps are displayed in a side-by-side manner by s ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVIMtjkUFuGRpet?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Stepper Component with Horizontal Orientation](./images/Blazor-horizontal.png) ## Vertical -You can display the steps one below the other vertically by setting the [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_Orientation) property to `Vertical`. +Display steps one below the other vertically by setting the [`Orientation`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_Orientation) property to `Vertical`. ```cshtml @@ -111,4 +113,6 @@ You can display the steps one below the other vertically by setting the [Orienta ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBIWDXaqvSVUove?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Stepper Component with Vertical Orientation](./images/Blazor-vertical.png) \ No newline at end of file diff --git a/blazor/stepper/steps-validation.md b/blazor/stepper/steps-validation.md index 8d8b006d57..1659d9f190 100644 --- a/blazor/stepper/steps-validation.md +++ b/blazor/stepper/steps-validation.md @@ -1,15 +1,15 @@ --- layout: post -title: Validation in Blazor Stepper Component | Syncfusion +title: Steps Validation in Blazor Stepper Component | Syncfusion description: Checkout and learn about Validation with Blazor Stepper component in Blazor Server App and Blazor WebAssembly App. platform: Blazor control: Stepper documentation: ug --- -# Steps validation in Blazor Stepper Component +# Steps Validation in Blazor Stepper Component -The Stepper component allows you to set the validation state for each step, displaying either a success or error icon. You can define the success state of a step by setting the [IsValid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperStep.html#Syncfusion_Blazor_Navigations_StepperStep_IsValid) property to `true`. If set to `false`, the step will display an error state. By default, the `IsValid` property is `null`. +The Stepper component allows setting the validation state for each step, displaying either a success or error icon. Define the success state of a step by setting the [`IsValid`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperStep.html#Syncfusion_Blazor_Navigations_StepperStep_IsValid) property to `true`. If set to `false`, the step displays an error state. By default, the `IsValid` property is `null`. > Based on the `StepType`, the validation state icon will be displayed either as an indicator or as part of the step label/text. @@ -68,11 +68,12 @@ The Stepper component allows you to set the validation state for each step, disp ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLSCtZEKlxWOZBs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Stepper Component with Validation](./images/Blazor-validation.png) -## Validating fields +## Validating Fields -You can validate the fields within the stepper component. In the below shared example, as the user progress through steps they enter information, receive feedback, and confirm submission. Validation messages will appear for errors, and a success message confirms the completion. +Validate fields within the stepper component. In the below shared example, as the user progress through steps they enter information, receive feedback, and confirm submission. Validation messages will appear for errors, and a success message confirms the completion. ```cshtml @@ -378,4 +379,6 @@ You can validate the fields within the stepper component. In the below shared ex ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLyCXtuAvQVIiww?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Validation using editform](./images/edit-form.png) diff --git a/blazor/stepper/steps.md b/blazor/stepper/steps.md index a830a14f94..b160b0a863 100644 --- a/blazor/stepper/steps.md +++ b/blazor/stepper/steps.md @@ -9,21 +9,21 @@ documentation: ug # Steps in Blazor Stepper Component -The Blazor Stepper allows you to add steps using the [StepperStep](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperStep.html) tag directive. Each step can be configured with options such as `IconCss`, `Text`, `Label`, `CssClass` and more. +The Blazor Stepper allows adding steps using the [`StepperStep`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperStep.html) tag directive. Each step can be configured with properties such as `IconCss`, `Text`, `Label`, `CssClass`, and more. -## Adding steps +## Adding Steps -You can define the icon and text content for each step using the `IconCss`, `Text` and `Label` properties. +Define the icon (`IconCss`), primary text (`Text`), and supplementary label (`Label`) content for each step using the respective properties. -### Defining icon CSS +### Defining Icon CSS -You can define the CSS class to show the icon for each step using the `IconCss` property. +Define the CSS class to display an icon for each step using the `IconCss` property. ```cshtml @using Syncfusion.Blazor.Navigations - + @@ -61,11 +61,13 @@ You can define the CSS class to show the icon for each step using the `IconCss` ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVIMtjkUFuGRpet?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Stepper Component with Icon](./images/Blazor-horizontal.png) -### Defining text content +### Defining Text Content -You can define text instead of an icon by setting the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperStep.html#Syncfusion_Blazor_Navigations_StepperStep_Text) property and display label content for a step using the [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperStep.html#Syncfusion_Blazor_Navigations_StepperStep_Label) property. +Define text for a step using the [`Text`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperStep.html#Syncfusion_Blazor_Navigations_StepperStep_Text) property. Display additional label content for a step using the [`Label`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperStep.html#Syncfusion_Blazor_Navigations_StepperStep_Label) property. > When both label and text are defined, the label takes priority for display based on the `StepType`. @@ -97,11 +99,13 @@ You can define text instead of an icon by setting the [Text](https://help.syncfu ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhosjjEgYjbXHIq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Stepper Component with text content](./images/Blazor-text-content.png) -## Optional steps +## Optional Steps -You can show whether the step is optional or not by using [Optional](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperStep.html#Syncfusion_Blazor_Navigations_StepperStep_Optional) property. By default, the `Optional` property is false. +Indicate whether a step is optional or not by using the [`Optional`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperStep.html#Syncfusion_Blazor_Navigations_StepperStep_Optional) property. By default, the `Optional` property is `false`. ```cshtml @@ -144,11 +148,14 @@ You can show whether the step is optional or not by using [Optional](https://hel ``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBIiXNOqaiqGIPc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Stepper Component with Optional](./images/Blazor-optional.png) -## Disabling steps +## Disabling Steps -You can use the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperStep.html#Syncfusion_Blazor_Navigations_StepperStep_Disabled) property to disable a step, preventing user interaction when set to `true`. By default, the value is `false`. +Disable a step and prevent user interaction by setting the [`Disabled`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperStep.html#Syncfusion_Blazor_Navigations_StepperStep_Disabled) property to `true`. By default, the value is `false`. ```cshtml @@ -191,11 +198,14 @@ You can use the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz ``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVIsZtkAaslImDG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Stepper Component with Disabled](./images/Blazor-disabled.png) -## Setting readonly +## Setting ReadOnly -You can use [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_ReadOnly) property to disable the user interactions in the stepper. +Disable user interactions across the entire Stepper component by setting the [`ReadOnly`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_ReadOnly) property to `true`. ```cshtml @@ -238,11 +248,13 @@ You can use [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.N ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVSMXjYqYVfMlnN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Stepper Component with ReadOnly](./images/Blazor-Readonly.png) -## Setting active step +## Setting Active Step -You can set the active step by specifying its index using the [ActiveStep](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_ActiveStep) property. The default value is `0`. +Set the active step by specifying its zero-based index using the [`ActiveStep`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_ActiveStep) property. The default value is `0` (the first step). ```cshtml @@ -285,9 +297,12 @@ You can set the active step by specifying its index using the [ActiveStep](https ``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthyiXXaUEBvHies?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Stepper Component with ActiveStep](./images/Blazor-activeStep.png) -## Step status +## Step Status Each step's progress state can be specified using the [Status](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperStep.html#Syncfusion_Blazor_Navigations_StepperStep_Status) property. The possible values are `NotStarted`, `InProgress` and `Completed`. By default, the value is `NotStarted`. @@ -399,11 +414,14 @@ Each step's progress state can be specified using the [Status](https://help.sync ``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/htreiZNaUEUAPnaJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Stepper Component with step status](./images/Blazor-step-status.png) -## Step styling +## Step Styling -You can use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperStep.html#Syncfusion_Blazor_Navigations_StepperStep_CssClass) property to customize the appearance of each step. +Customize the appearance of individual steps using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperStep.html#Syncfusion_Blazor_Navigations_StepperStep_CssClass) property. ```cshtml @@ -460,10 +478,12 @@ You can use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLoitjYgOTjGexy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Stepper Component with CssClass](./images/Blazor-cssclass.png) -## Step validation +## Step Validation -You can set the validation state for each step to displaying a success or error icon by using [IsValid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperStep.html#Syncfusion_Blazor_Navigations_StepperStep_IsValid) property. +Set the validation state for each step to display a success or error icon by using the [`IsValid`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.StepperStep.html#Syncfusion_Blazor_Navigations_StepperStep_IsValid) property. > To know more about Stepper validation, please refer to the [Validation](./steps-validation#validating-steps) section. \ No newline at end of file diff --git a/blazor/stepper/steptypes.md b/blazor/stepper/steptypes.md index c72540ee0a..7efef5d5b2 100644 --- a/blazor/stepper/steptypes.md +++ b/blazor/stepper/steptypes.md @@ -7,11 +7,11 @@ control: Stepper documentation: ug --- -# Step types in Blazor Stepper Component +# Step Types in Blazor Stepper Component The Stepper component provides support for displaying steps with the following step types. -## Default type +## Default Type In default type, the Stepper displays steps with a combination of both indicators and labels by setting the [StepType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_StepType) property as `Default`. By default, the Stepper displays steps in the `Default` type. @@ -59,14 +59,15 @@ In default type, the Stepper displays steps with a combination of both indicator ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhyiZNkgueNLWQU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Stepper Component with Default type](./images/Blazor-default-type.png) -## Label type +## Label Type -In label type, the Stepper displays the steps with only the step labels by setting the [StepType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_StepType) property as `Label`. +In label type, the Stepper displays steps with only the step labels by setting the [StepType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_StepType) property to `Label`. -> When both label and text are defined, the label takes priority in displaying the steps. +> When both `Label` and `Text` are defined for a step, the `Label` takes priority for display in this `StepType`. ```cshtml @@ -113,11 +114,13 @@ In label type, the Stepper displays the steps with only the step labels by setti ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDheMXNuqkGtoGBq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Stepper Component with Label type](./images/Blazor-label-type.png) -### Label positions +### Label Positions -You can display the label on the top, bottom, left, or right side of the steps using the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_LabelPosition) property. +Display the label on the top, bottom, left, or right side of the steps using the [`LabelPosition`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_LabelPosition) property. The following label positions are supported in Stepper: @@ -199,10 +202,11 @@ The following label positions are supported in Stepper: ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBeWjtkAYmROuvX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Stepper Component with LabelPosition](./images/Blazor-labelposition.png) -## Indicator type +## Indicator Type In indicator type, the Stepper displays steps with only the step indicators by setting the [StepType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_StepType) property as `Indicator`. @@ -242,4 +246,6 @@ In indicator type, the Stepper displays steps with only the step indicators by ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBSsXZEAabvouRj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Stepper Component with Indicator type](./images/Blazor-indicator.png) \ No newline at end of file diff --git a/blazor/stepper/template.md b/blazor/stepper/template.md index ac8d3d1bc2..4ec178ad77 100644 --- a/blazor/stepper/template.md +++ b/blazor/stepper/template.md @@ -9,7 +9,7 @@ documentation: ug # Template in Blazor Stepper Component -The Stepper component allows you to customize the default appearance and content of each step, creating a personalized experience for the user. You can use the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_Template) tag directive to set the template content for the steps. +The Stepper component allows customization of each step's default appearance and content, providing a personalized user experience. Define custom content for the steps using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_Template) tag directive. The `StepperStep` tag directive options and current step index are passed as `step` and `currentStep` properties in the template context for customization. @@ -97,5 +97,6 @@ The `StepperStep` tag directive options and current step index are passed as `st ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDByiXjaKOkzdqER?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Stepper Component with Template](./images/Blazor-template.png) \ No newline at end of file diff --git a/blazor/stepper/tooltip.md b/blazor/stepper/tooltip.md index 6e5defd2d8..3142fc88a8 100644 --- a/blazor/stepper/tooltip.md +++ b/blazor/stepper/tooltip.md @@ -9,9 +9,9 @@ documentation: ug # Tooltips in Blazor Stepper Component -The Stepper component supports tooltip to show additional information in the steps by setting the [ShowTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_ShowTooltip) property to `true`. +The Stepper component supports displaying tooltips to show additional information for steps. Enable this feature by setting the [`ShowTooltip`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_ShowTooltip) property to `true`. -The tooltip appears when the user hovers over the step, providing the information such as the label or text. By default, the `ShowTooltip` property is `false`. +The tooltip appears when a user hovers over a step, providing information such as the step's label or text. By default, the `ShowTooltip` property is `false`. ```cshtml @@ -54,14 +54,15 @@ The tooltip appears when the user hovers over the step, providing the informatio ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLesDtkJNtBGYph?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Stepper Component with Tooltip](./images/Blazor-tooltip.png) -## Tooltip template +## Tooltip Template -You can use the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_TooltipTemplate) tag directive to specify a custom template for the tooltips, providing detailed information about the steps. +Use the [`TooltipTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfStepper.html#Syncfusion_Blazor_Navigations_SfStepper_TooltipTemplate) tag directive to specify a custom template for the tooltips, providing detailed and dynamic information about the steps. -When hovering over the step, the current step model is passed in the template context, allowing you to include dynamic information about the step. +When hovering over a step, the current step's model (the `StepperStep` instance) is passed as the `@context` object to the template, allowing dynamic information to be included. ```cshtml @@ -138,4 +139,6 @@ When hovering over the step, the current step model is passed in the template co ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLIMDtkJZDvetoA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Stepper Component with Tooltip Template](./images/Blazor-tooltip-template.png) \ No newline at end of file