From c14c6be68999e93fd89ee2fcf7ec9defb0ce666b Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Mon, 13 Oct 2025 10:54:16 +0530 Subject: [PATCH 1/5] 983104: Updated the UG Documentation for SpeedDial --- blazor/speeddial/accessibility.md | 50 +++++++++++----------- blazor/speeddial/display-modes.md | 17 ++++---- blazor/speeddial/events.md | 14 +++--- blazor/speeddial/getting-started-webapp.md | 40 ++++++++--------- blazor/speeddial/getting-started.md | 28 ++++++------ blazor/speeddial/items.md | 40 ++++++++--------- blazor/speeddial/modal.md | 4 +- blazor/speeddial/positions.md | 11 +++-- blazor/speeddial/radial-menu.md | 18 ++++---- blazor/speeddial/styles.md | 26 +++++------ blazor/speeddial/template.md | 6 +-- 11 files changed, 127 insertions(+), 127 deletions(-) diff --git a/blazor/speeddial/accessibility.md b/blazor/speeddial/accessibility.md index ca05bca143..ee3882f8ae 100644 --- a/blazor/speeddial/accessibility.md +++ b/blazor/speeddial/accessibility.md @@ -7,22 +7,22 @@ control: SpeedDial documentation: ug --- -# Accessibility in Blazor SpeedDial component +# Accessibility in Blazor Speed Dial component -The Blazor Speed Dial 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. +The Blazor Speed Dial 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 [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. -The accessibility compliance for the Blazor Speed Dial component is outlined below. +The accessibility compliance for the Blazor Speed Dial component is outlined below. The badges indicate whether each criterion is fully supported. | Accessibility Criteria | Compatibility | | -- | -- | -| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Yes | -| [Section 508 Support](../common/accessibility#accessibility-standards) |Yes | -| [Screen Reader Support](../common/accessibility#screen-reader-support) | Yes | -| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | -| [Color Contrast](../common/accessibility#color-contrast) | Yes | -| [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | -| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Yes | -| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Yes | +| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Meets requirement | +| [Section 508 Support](../common/accessibility#accessibility-standards) |Meets requirement | +| [Screen Reader Support](../common/accessibility#screen-reader-support) | Meets requirement | +| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Meets requirement | +| [Color Contrast](../common/accessibility#color-contrast) | Meets requirement | +| [Mobile Device Support](../common/accessibility#mobile-device-support) | Meets requirement | +| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Meets requirement | +| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Meets requirement | -
Yes - All features of the component meet the requirement.
+
Meets requirement - All features of the component meet the requirement.
-
Intermediate - Some features of the component do not meet the requirement.
+
Partially meets requirement - Some features of the component do not meet the requirement.
-
No - The component does not meet the requirement.
+
Does not meet requirement - The component does not meet the requirement.
## WAI-ARIA attributes -The Blazor Speed Dial component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Speed Dial component: +The Blazor Speed Dial component follows relevant [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) patterns to meet accessibility requirements. The following ARIA attributes are used in the Blazor Speed Dial component: | Attributes | Purpose | | ------------ | ----------------------- | -| `role=menu` | Specifies that the Speed Dial item has a submenu.| -| `role=menuitem` | Indicates an actionable item within the Speed Dial submenu. | -| `aria-label` | Indicates the Speed Dial Popup item text. | -| `aria-expanded` | It indicates whether the Speed Dial current state is expanded or collapsed. | -| `aria-haspopup` | It indicates whether the Speed Dial has popup items or not. | -| `aria-controls` | Attribute is set to the Speed Dial button and it points to the corresponding content. | -| `aria-disabled` | Indicates the state of menu item whether it is disabled. | +| `role=menu` | Identifies the popup that contains the Speed Dial action items. | +| `role=menuitem` | Identifies an actionable item within the Speed Dial popup. | +| `aria-label` | Provides an accessible name for the Speed Dial popup or items. | +| `aria-expanded` | Indicates whether the Speed Dial popup is expanded or collapsed. | +| `aria-haspopup` | Indicates that the trigger button opens a popup with menu items. | +| `aria-controls` | References the popup element controlled by the trigger button. | +| `aria-disabled` | Indicates that a menu item is disabled and unavailable for interaction. | ## Keyboard interaction -The Blazor Speed Dial component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Speed Dial component. +The Blazor Speed Dial component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/#keyboardinteraction) guidelines, making it accessible for users of assistive technologies and those who rely on keyboard navigation. The following keyboard shortcuts are supported: | Windows | Mac | Actions | |------------|-------------------| --- | @@ -68,10 +68,10 @@ The Blazor Speed Dial component followed the [keyboard interaction](https://www. ## Ensuring accessibility -The Blazor Speed Dial component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Blazor Speed Dial component’s accessibility is validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright-based automated tests. The accessibility compliance of the Blazor Speed Dial component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/speeddial) in a new window to evaluate the accessibility of the Blazor Speed Dial component with accessibility tools. ## See also -* [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) +* [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file diff --git a/blazor/speeddial/display-modes.md b/blazor/speeddial/display-modes.md index 7df50f086f..facdcbbb0a 100644 --- a/blazor/speeddial/display-modes.md +++ b/blazor/speeddial/display-modes.md @@ -9,23 +9,24 @@ documentation: ug # Display Modes in Blazor Speed Dial Component -The action items in Blazor Speed Dial can be displayed in `Linear` and `Radial` display modes by setting [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Mode) property. +The action items in the Blazor Speed Dial can be displayed in Linear or Radial modes by setting the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Mode) property. By default, Speed Dial items are displayed in Linear mode. ## Linear display mode -In `Linear` display mode, Speed Dial action items are displayed in a list-like format either horizontally or vertically. By default, Speed Dial items are displayed in `Linear` mode. +In `Linear` display mode, Speed Dial action items are displayed in a list-like layout either horizontally or vertically, based on the direction. ### Direction -You can open the action items on the top, left, up, and down side of the Speed Dial button by setting [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Direction) property. The default value is `Auto` where the action items are displayed based on the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Position)of the Speed Dial. +You can open the action items to the left, right, up, or down side of the Speed Dial button by setting [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Direction) property. The default value is `Auto` where the action items are displayed based on the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Position) +of the Speed Dial. The `Linear` directions of Speed Dial are as follows: * Left - Action items are displayed on the left side of the button. * Right - Action items are displayed on the right side of the button. -* Up - Action items are displayed on the top of the button. -* Down - Action items are displayed on the bottom of the button. -* Auto - Action items display direction auto calculated based on `Position` of the Speed Dial. If Speed Dial is position at bottom right, then action items displayed at top. +* Up - Action items are displayed above the button. +* Down - Action items are displayed below the button. +* Auto - The direction is automatically calculated based on the Speed Dial `Position` (for example, if positioned at the bottom-right, items open upward). ```cshtml @@ -41,8 +42,8 @@ The `Linear` directions of Speed Dial are as follows: ``` -![Blazor Speed Dial Linear Mode](./images/Blazor-SpeedDial-LinearMode.png) +![Linear display mode with items opening to the left](./images/Blazor-SpeedDial-LinearMode.png) ## Radial display mode (Radial Menu) -In `Radial` mode, Speed Dial action items are displayed in a circular pattern like a radial menu. For more details about radial mode, check out the link [here](https://blazor.syncfusion.com/documentation/speeddial/getting-started). +In `Radial` mode, Speed Dial action items are displayed in a circular pattern similar to a radial menu. For more details about Radial mode, see the getting started guide [here](https://blazor.syncfusion.com/documentation/speeddial/getting-started). \ No newline at end of file diff --git a/blazor/speeddial/events.md b/blazor/speeddial/events.md index cb27531f48..2edba8bb37 100644 --- a/blazor/speeddial/events.md +++ b/blazor/speeddial/events.md @@ -13,7 +13,7 @@ This section describes the Speed Dial events that will be triggered when appropr ## Item clicked -The speed dial Component triggers the [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemClicked) event with [SpeedDialItemEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItemEventArgs.html) argument when an action item is clicked. You can use this event to perform the required action. +The Speed Dial component raises the [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemClicked) event with [SpeedDialItemEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItemEventArgs.html) argument when an action item is clicked. You can use this event to perform the required action. {% tabs %} {% highlight razor %} @@ -40,7 +40,7 @@ The speed dial Component triggers the [ItemClicked](https://help.syncfusion.com/ ## Created -The speed dial Component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Created) event when SpeedDial Component rendering is completed. +The Speed Dial component raises the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Created) event after the component has completed rendering. Use this event to run initialization logic, logging, or configuration that depends on the rendered instance. {% tabs %} {% highlight razor %} @@ -67,7 +67,7 @@ The speed dial Component triggers the [Created](https://help.syncfusion.com/cr/b ## Opening -The speed dial Component triggers the [Opening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Opening) event with [SpeedDialBeforeOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialBeforeOpenCloseEventArgs.html) argument before the SpeedDial popup is opened. +The Speed Dial component raises the [Opening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Opening) event with [SpeedDialBeforeOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialBeforeOpenCloseEventArgs.html) before the Speed Dial popup opens. Use this event to prepare data, adjust items, or cancel opening based on conditions by setting the Cancel property in the event arguments. {% tabs %} {% highlight razor %} @@ -94,7 +94,7 @@ The speed dial Component triggers the [Opening](https://help.syncfusion.com/cr/b ## Opened -The speed dial Component triggers the [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Opened) event with [SpeedDialOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialOpenCloseEventArgs.html) argument when SpeedDial popup is opened. +The Speed Dial component raises the [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Opened) event with [SpeedDialOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialOpenCloseEventArgs.html) after the Speed Dial popup is opened. Use this event to run logic that depends on the popup being visible, such as focusing elements or tracking analytics. {% tabs %} {% highlight razor %} @@ -121,7 +121,7 @@ The speed dial Component triggers the [Opened](https://help.syncfusion.com/cr/bl ## Closing -The speed dial Component triggers the [Closing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Closing) event with [SpeedDialBeforeOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialBeforeOpenCloseEventArgs.html) argument before the SpeedDial popup is closed. +The Speed Dial component raises the [Closing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Closing) event with [SpeedDialBeforeOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialBeforeOpenCloseEventArgs.html) before the Speed Dial popup closes. Use this event to validate state, save changes, or cancel closing by setting the Cancel property in the event arguments. {% tabs %} {% highlight razor %} @@ -148,7 +148,7 @@ The speed dial Component triggers the [Closing](https://help.syncfusion.com/cr/b ## Closed -The speed dial Component triggers the [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Closed) event with [SpeedDialOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialOpenCloseEventArgs.html) argument when SpeedDial popup is closed. +The Speed Dial component raises the [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Closed) event with [SpeedDialOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialOpenCloseEventArgs.html) after the Speed Dial popup is closed. Use this event to perform cleanup or post-close actions. {% tabs %} {% highlight razor %} @@ -175,7 +175,7 @@ The speed dial Component triggers the [Closed](https://help.syncfusion.com/cr/bl ## Item rendered -The speed dial Component triggers the [ItemRendered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemRendered) event with [SpeedDialItemEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItemEventArgs.html) argument for each `SpeedDialItem` once its rendered. +The Speed Dial component raises the [ItemRendered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemRendered) event with [SpeedDialItemEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItemEventArgs.html) for each SpeedDialItem after it is rendered. Use this event to customize item UI or attributes once the DOM is available. {% tabs %} {% highlight razor %} diff --git a/blazor/speeddial/getting-started-webapp.md b/blazor/speeddial/getting-started-webapp.md index 32744e327e..affe38fab5 100644 --- a/blazor/speeddial/getting-started-webapp.md +++ b/blazor/speeddial/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor SpeedDial in Blazor Web App -This section briefly explains about how to include `Blazor SpeedDial` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to add the Blazor Speed Dial component to a Blazor Web App using Visual Studio or Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include `Blazor SpeedDial` component ## 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) 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) 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=windows) while creating a Blazor Web Application. +Configure the appropriate [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=windows) when creating the Blazor Web App. ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App -To add **Blazor SpeedDial** 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.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the Blazor Speed Dial component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) 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 you use the WebAssembly or Auto render modes in the Blazor Web App, you need to install the Syncfusion Blazor NuGet packages in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion Blazor components are available on NuGet.org. For the full list of available packages, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -54,11 +54,11 @@ N> Syncfusion® Blazor components are availa ## 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). +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). -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 appropriate [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 the Blazor Web App. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, in a Blazor Web App with the Auto interactive render mode, run the following commands: {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,11 +70,11 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For more information on creating a Blazor Web App with various interactive modes and locations, see [Blazor Web App interactive modes and locations](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## Install Syncfusion® Blazor Buttons 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 utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages 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. @@ -102,10 +102,10 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** from the client project. | +| Server | Open **~/_Imports.razor** (typically in the Components folder). | -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace . +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` 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 set to WebAssembly or Auto, register the Syncfusion Blazor service in both **~/Program.cs** files (server and client) of the Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -175,7 +175,7 @@ var app = builder.Build(); ## 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: +The theme stylesheet and script are provided via NuGet as [static web assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet reference in the head and the script reference at the end of the body in **~/Components/App.razor** as shown below. The script enables client-side interactivity for Syncfusion components. ```html @@ -203,7 +203,7 @@ Add the Syncfusion® Blazor SpeedDial compon | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the interactivity location is set to Global and the render mode is Auto, WebAssembly, or Server, the render mode is configured in the App.razor file by default. {% tabs %} {% highlight razor %} @@ -294,4 +294,4 @@ The speed dial control triggers the [`ItemClicked`](https://help.syncfusion.com/ {% previewsample "https://blazorplayground.syncfusion.com/embed/BDBpjWAjTARQyWoC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor SpeedDial Component](./images/blazor-speeddial-event-sample.png)" %} -N> You can also explore our [Blazor Speed Dial Button example](https://blazor.syncfusion.com/demos/speeddial/defaultfunctionalities) that shows how to render and configure the button. \ No newline at end of file +N> Explore the [Blazor Speed Dial Button example](https://blazor.syncfusion.com/demos/speeddial/defaultfunctionalities) that shows how to render and configure the button. \ No newline at end of file diff --git a/blazor/speeddial/getting-started.md b/blazor/speeddial/getting-started.md index c7c5c837b0..553862ee71 100644 --- a/blazor/speeddial/getting-started.md +++ b/blazor/speeddial/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor SpeedDial Component -This section briefly explains about how to include Blazor SpeedDial component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to add the Blazor SpeedDial component to a Blazor WebAssembly application using Visual Studio or Visual Studio Code. To get start quickly with SpeedDial Component using Blazor, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/SpeedDial) sample. @@ -26,11 +26,11 @@ To get start quickly with SpeedDial Component using Blazor, you can check on thi ## Create a new Blazor 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 either the [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App -To add **Blazor SpeedDial** 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.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) 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 the Blazor SpeedDial component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## 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 either the [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, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following commands in the integrated terminal (Ctrl+`). {% tabs %} @@ -71,8 +71,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Buttons 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. -* Run the following command to install a [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the current directory is the project root where the `.csproj` file is located. +* Run the following commands to install the [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages and restore dependencies. {% tabs %} @@ -86,7 +86,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -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> Refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to learn multiple methods to reference themes in a Blazor application, including [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 script references, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). The example below uses the bootstrap5 theme, which also provides the e-icons set used by SpeedDial. ## Add Blazor SpeedDial component @@ -161,13 +161,13 @@ Add the Syncfusion® Blazor SpeedDial compon {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor SpeedDial component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. The Syncfusion® Blazor SpeedDial component will render in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rZrfjigtfqnDNcxJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor SpeedDial Component](./images/blazor-speeddial-component.png)" %} ## Linear and radial display modes -You can use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Mode) property to either display the menu in linear order like a list or like a radial menu in radial (circular) direction. +Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Mode) property to display action items either in a linear list or as a radial (circular) menu. {% tabs %} {% highlight razor %} @@ -197,7 +197,7 @@ You can use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor ## Item clicked event -The speed dial control triggers the [`ItemClicked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemClicked) event with [`SpeedDialItemEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItemEventArgs.html) argument when an action item is clicked. You can use this event to perform the required action. +The SpeedDial control triggers the [`ItemClicked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemClicked) event with [`SpeedDialItemEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItemEventArgs.html) when an action item is clicked. Use this event to perform the required action. {% tabs %} {% highlight razor %} @@ -223,4 +223,4 @@ The speed dial control triggers the [`ItemClicked`](https://help.syncfusion.com/ {% previewsample "https://blazorplayground.syncfusion.com/embed/BDBpjWAjTARQyWoC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor SpeedDial Component](./images/blazor-speeddial-event-sample.png)" %} -N> You can also explore our [Blazor Speed Dial Button example](https://blazor.syncfusion.com/demos/speeddial/defaultfunctionalities) that shows how to render and configure the button. +N> Explore the [Blazor Speed Dial Button example](https://blazor.syncfusion.com/demos/speeddial/defaultfunctionalities) that shows how to render and configure the button. diff --git a/blazor/speeddial/items.md b/blazor/speeddial/items.md index 963f021cfb..a5d4d84c5d 100644 --- a/blazor/speeddial/items.md +++ b/blazor/speeddial/items.md @@ -9,23 +9,23 @@ documentation: ug # Items in Blazor Speed Dial Component -The action items in Blazor Speed Dial can be added by using [SpeedDialItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html) tag directive. +Add action items to the Blazor SpeedDial using the [SpeedDialItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html) tag directive. Items can display text, icons, or both, and support disabling, tooltips, animation, and templating. | Fields | Type | Description | |------|------|-------------| -| [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Text) | `string` | Defines the text content of SpeedDialItem. | -| [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_IconCss) | `string` | Defines one or more CSS classes to include an icon or image in speed dial item. | -| [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Disabled) | `boolean` | Defines whether to enable or disable the SpeedDialItem. | -| [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_ID) | `string` | Defines a unique value for the SpeedDialItem which can be used to identify the item in event args. | -| [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Title) | `string` | Defines the title of SpeedDialItem to display tooltip. | +| [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Text) | `string` | Defines the text content of the SpeedDialItem. | +| [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_IconCss) | `string` | Defines one or more CSS classes to include an icon or image in a speed dial item. | +| [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Disabled) | `bool` | Enables or disables the SpeedDialItem. | +| [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_ID) | `string` | Defines a unique value for the SpeedDialItem that can be used to identify the item in event arguments. | +| [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Title) | `string` | Defines the title of the SpeedDialItem to display a tooltip. | ## Icons in speeddial items -You can customize the icon and text of Speed Dial action items using [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_IconCss) and [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Text) properties. +Customize the icon and text of speed dial action items using the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_IconCss) and [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Text) properties. ### Icon only -You can show icon only in SpeedDial items by setting [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_IconCss) property. You can show tooltip on hover to show additional details to end-user by setting [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Title) property. +Show only an icon in SpeedDial items by setting the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_IconCss) property. To provide additional details, display a tooltip on hover or focus by setting the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Title) property. ```cshtml @@ -41,11 +41,11 @@ You can show icon only in SpeedDial items by setting [IconCss](https://help.sync ``` -![Blazor Speed Dial with Icon](./images/Blazor-SpeedDial-Icon.png) +![Blazor SpeedDial with icons](./images/Blazor-SpeedDial-Icon.png) ### Text Only -You can show only text in Speed Dial items by setting [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Text) property. +Show only text in SpeedDial items by setting the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Text) property. ```cshtml @@ -61,11 +61,11 @@ You can show only text in Speed Dial items by setting [Text](https://help.syncfu ``` -![Blazor Speed Dial with Text](./images/Blazor-SpeedDial-Text.png) +![Blazor SpeedDial with text](./images/Blazor-SpeedDial-Text.png) ### Icon with Text -You can show icon along with text in Speed Dial items by setting [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_IconCss) and [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Text) properties. +Show an icon along with text in SpeedDial items by setting both the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_IconCss) and [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Text) properties. ```cshtml @@ -81,11 +81,11 @@ You can show icon along with text in Speed Dial items by setting [IconCss](https ``` -![Blazor Speed Dial with Icon and Text](./images/Blazor-SpeedDial-Iconwithtext.png) +![Blazor SpeedDial with icon and text](./images/Blazor-SpeedDial-Iconwithtext.png) ### Disabled -You can disable Speed Dial items by setting [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Disabled) property as `true`. +Disable SpeedDial items by setting the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Disabled) property to `true`. ```cshtml @@ -101,7 +101,7 @@ You can disable Speed Dial items by setting [Disabled](https://help.syncfusion.c ``` -![Blazor Speed Dial with Disabled](./images/Blazor-SpeedDial-DisabledItem.png) +![Blazor SpeedDial with a disabled item](./images/Blazor-SpeedDial-DisabledItem.png) ## Animation @@ -124,17 +124,17 @@ Below example demonstrates the Speed Dial items with applied Zoom effect. ``` -![Blazor Speed Dial Animation](./images/Blazor-SpeedDial-Animation.png) +![Blazor SpeedDial animation](./images/Blazor-SpeedDial-Animation.png) ## Template -The Speed Dial supports to customize the action items and entire pop-up container by setting [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemTemplate) and [PopupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_PopupTemplate) tag directive. For more details about templates, check out the link [here](https://blazor.syncfusion.com/documentation/speeddial/getting-started). +The Speed Dial supports customizing both the action items and the popup container using the [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemTemplate) and [PopupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_PopupTemplate) tag directives. For more details about templates, check the guidance [here](https://blazor.syncfusion.com/documentation/speeddial/getting-started). ## HTML attribute -The Blazor Speed Dial items support adding custom HTML attributes with [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_HtmlAttributes) property to customize the items. You can add them as inline attributes or use the `@attributes` directive. +Blazor Speed Dial items support adding custom HTML attributes via the [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_HtmlAttributes) property to customize items. Add them as inline attributes or use the `@attributes` directive. -Below example demonstrates the Speed Dial items with HTML attributes. +The following example shows SpeedDial items with HTML attributes. ```cshtml @@ -150,4 +150,4 @@ Below example demonstrates the Speed Dial items with HTML attributes. ``` -![Blazor Speed Dial With HTML attributes](./images/Blazor-SpeedDial-HTML-Attribute.png) \ No newline at end of file +![Blazor SpeedDial with HTML attributes](./images/Blazor-SpeedDial-HTML-Attribute.png) \ No newline at end of file diff --git a/blazor/speeddial/modal.md b/blazor/speeddial/modal.md index 679c3c2453..f5c3c9d233 100644 --- a/blazor/speeddial/modal.md +++ b/blazor/speeddial/modal.md @@ -9,7 +9,7 @@ documentation: ug # Modal in Blazor SpeedDial Component -You can use the [IsModal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_IsModal) property to set the Speed Dial as modal which adds an overlay to prevent the background interaction. +Use the [IsModal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_IsModal) property to enable modal behavior for the SpeedDial. When enabled, the component displays an overlay while the action items are open, preventing interaction with background content and keeping focus on the speed dial actions. {% tabs %} {% highlight razor %} @@ -27,4 +27,4 @@ You can use the [IsModal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo {% endhighlight %} {% endtabs %} -![Blazor SpeedDial with IsModal](./images/Blazor-SpeedDial-ModalProperty.png) +![Blazor SpeedDial with IsModal](./images/Blazor-SpeedDial-ModalProperty.png) \ No newline at end of file diff --git a/blazor/speeddial/positions.md b/blazor/speeddial/positions.md index 2c13d7233a..4d6c049169 100644 --- a/blazor/speeddial/positions.md +++ b/blazor/speeddial/positions.md @@ -9,9 +9,9 @@ documentation: ug # Positions in Blazor Speed Dial Component -The Speed dial Component can be positioned anywhere on the [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Target) using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Position) property. If the `Target` is not defined, then Speed Dial is positioned based on the browser viewport. +The SpeedDial component can be positioned anywhere within the specified [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Target) using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Position) property. If no `Target` is defined, the SpeedDial is positioned relative to the browser viewport. -The position values of Speed Dial are as follows: +The available position values for the SpeedDial are: * TopLeft * TopCenter * TopRight @@ -40,7 +40,7 @@ The position values of Speed Dial are as follows: ## Opens on hover -You can open the Speed Dial action items on mouse hover by setting the [OpensOnHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_OpensOnHover) property as true. +Open the SpeedDial action items on mouse hover by setting the [OpensOnHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_OpensOnHover) property to `true`. ```cshtml @@ -60,8 +60,7 @@ You can open the Speed Dial action items on mouse hover by setting the [OpensOnH ## Programmatically show/hide -You can open/close the Speed Dial action items programmatially using [ShowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ShowAsync) and -[HideAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_HideAsync) methods. +Open or close the SpeedDial action items programmatically using the [ShowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ShowAsync) and [HideAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_HideAsync) methods. These are asynchronous methods and should be awaited when invoked in an async context. Below example demonstrates open/close action items on button click. @@ -100,7 +99,7 @@ Below example demonstrates open/close action items on button click. ## Programmatically refresh the position -You can refresh the position of the Speed Dial using [RefreshPositionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_RefreshPositionAsync) method when the `Target`position is changed. +Refresh the position of the SpeedDial using the [RefreshPositionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_RefreshPositionAsync) method when the `Target` position changes. This asynchronous method should be awaited in an async context. ```cshtml diff --git a/blazor/speeddial/radial-menu.md b/blazor/speeddial/radial-menu.md index 5360f5ec4f..8159f2a050 100644 --- a/blazor/speeddial/radial-menu.md +++ b/blazor/speeddial/radial-menu.md @@ -9,11 +9,11 @@ documentation: ug # Radial Menu in Blazor Speed Dial Component -The action items in Blazor Speed Dial can be displayed in a circular patter like a radial menu by setting [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Mode) property. You can customize the `Direction`, `StartAngle`, `EndAngle` and `Offset` by setting [SpeedDialRadialSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialRadialSettings.html) tag directive. +Display Speed Dial action items in a circular pattern like a radial menu by setting the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Mode) property to radial. Customize the `Direction`, `StartAngle`, `EndAngle`, and `Offset` using the [SpeedDialRadialSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialRadialSettings.html) tag directive. ## Radial Menu direction -You can open the action items in either clockwise or anticlockwise by setting [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialRadialSettings.html#Syncfusion_Blazor_Buttons_SpeedDialRadialSettings_Direction) property. The default value is `Auto` where the action items are displayed based on the `Position` property of the Speed Dial. +Open the action items in either a clockwise or an anticlockwise direction by setting the [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialRadialSettings.html#Syncfusion_Blazor_Buttons_SpeedDialRadialSettings_Direction) property. The default value is `Auto`, which determines the arc based on the Speed Dial `Position`. ```cshtml @@ -30,15 +30,15 @@ You can open the action items in either clockwise or anticlockwise by setting [D ``` -![Blazor Speed Dial Radial Mode](./images/Blazor-SpeedDial-RadialMenu.png) +![Blazor SpeedDial radial mode](./images/Blazor-SpeedDial-RadialMenu.png) ## Start and end angle -You can modify the start and end angle of action items by setting [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialRadialSettings.html#Syncfusion_Blazor_Buttons_SpeedDialRadialSettings_StartAngle) and [EndAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialRadialSettings.html#Syncfusion_Blazor_Buttons_SpeedDialRadialSettings_EndAngle) properties. If the angle is not defined, the action items are displayed based on the `Position` property of the Speed Dial. +Modify the start and end angles of the action items using the [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialRadialSettings.html#Syncfusion_Blazor_Buttons_SpeedDialRadialSettings_StartAngle) and [EndAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialRadialSettings.html#Syncfusion_Blazor_Buttons_SpeedDialRadialSettings_EndAngle) properties (in degrees). If angles are not defined, the arc is determined by the Speed Dial `Position`. -The SpeedDial angle starts with `0` degree in the right side and increases in the clockwise direction. +The Speed Dial angle origin is 0° at the right side and increases in the clockwise direction. -![Blazor Speed Dial Radial Angle](./images/Blazor-RadialAngle.png) +![Blazor SpeedDial radial angles](./images/Blazor-RadialAngle.png) ```cshtml @@ -56,11 +56,11 @@ The SpeedDial angle starts with `0` degree in the right side and increases in th ``` -![Blazor Speed Dial Angles](./images/Blazor-SpeedDial-Angles.png) +![Blazor Speed Dial angles](./images/Blazor-SpeedDial-Angles.png) ## Offset -You can modify the offset distance between action items and Speed Dial button using [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialRadialSettings.html#Syncfusion_Blazor_Buttons_SpeedDialRadialSettings_OffSet) property. +Adjust the distance between the Speed Dial button and its action items using the [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialRadialSettings.html#Syncfusion_Blazor_Buttons_SpeedDialRadialSettings_OffSet) property. ```cshtml @@ -77,4 +77,4 @@ You can modify the offset distance between action items and Speed Dial button us ``` -![Blazor Speed Dial Offset](./images/Blazor-SpeedDial-Offset.png) +![Blazor SpeedDial radial offset](./images/Blazor-SpeedDial-Offset.png) \ No newline at end of file diff --git a/blazor/speeddial/styles.md b/blazor/speeddial/styles.md index da7f40ad40..7c55b890f3 100644 --- a/blazor/speeddial/styles.md +++ b/blazor/speeddial/styles.md @@ -9,15 +9,15 @@ documentation: ug # Styles in Blazor SpeedDial Component -This section briefs different ways to style SpeedDial Component. +This section describes the different ways to style the SpeedDial component and configure its icons, text, states, and appearance. ## SpeedDial button -You can customize the icon and text of Blazor SpeedDial component using [OpenIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_OpenIconCss), [CloseIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_CloseIconCss) and [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Content) properties. +Customize the icon and text of the Blazor SpeedDial component using the [OpenIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_OpenIconCss), [CloseIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_CloseIconCss), and [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Content) properties. Icon classes (e-icons) are provided by the selected theme. ### SpeedDial with Icon -You can use the [OpenIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_OpenIconCss) and [CloseIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_CloseIconCss) properties to show icons in speed dial button. You can also show tooltip on hover to show additional details to end-user by setting `title` attribute. +Use the [OpenIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_OpenIconCss) and [CloseIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_CloseIconCss) properties to show icons in the speed dial button. To provide additional context, show a tooltip on hover by setting the `title` attribute. {% tabs %} {% highlight razor %} @@ -39,7 +39,7 @@ You can use the [OpenIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.B ### SpeedDial with Text -You can show text only in SpeedDial button by setting [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Content) property without setting icon properties. +Show text only in the SpeedDial button by setting the [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Content) property without specifying icon properties. {% tabs %} {% highlight razor %} @@ -61,7 +61,7 @@ You can show text only in SpeedDial button by setting [Content](https://help.syn ### SpeedDial with Icon and Text -You show icon and text in Blazor Speed Dial Button using [OpenIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_OpenIconCss), [CloseIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_CloseIconCss) and [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Content) properties together. +Show both an icon and text in the Blazor SpeedDial button by setting the [OpenIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_OpenIconCss), [CloseIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_CloseIconCss), and [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Content) properties together. {% tabs %} {% highlight razor %} @@ -83,7 +83,7 @@ You show icon and text in Blazor Speed Dial Button using [OpenIconCss](https://h ## Disabled -You can enable or disable the Speed Dial Component using [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Disabled) property. +Enable or disable the Speed Dial component using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Disabled) property. When disabled, the floating action button and its interactions are unavailable. {% tabs %} {% highlight razor %} @@ -105,13 +105,13 @@ You can enable or disable the Speed Dial Component using [Disabled](https://help ## CssClass -The Blazor Speed Dial supports the following predefined styles that can be defined using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_CssClass) property. You can customize by setting the `CssClass` property with the below defined class. +Apply predefined visual styles using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_CssClass) property. Assign one of the following CSS classes to change the appearance. | CssClass | Description | | -------- | -------- | | e-primary | Used to represent a primary action. | -| e-outline | Used to represent an appearance of button with outline. | -| e-info | Used to represent an informative action. | +| e-outline | Used to render the button with an outline appearance. | +| e-info | Used to represent an informative action. | | e-success | Used to represent a positive action. | | e-warning | Used to represent an action with caution. | | e-danger | Used to represent a negative action. | @@ -136,7 +136,7 @@ The Blazor Speed Dial supports the following predefined styles that can be defin ## Visible -You can set the Speed Dial Component to visible/hidden state using [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Visible) property. +Control the visibility of the Speed Dial component using the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Visible) property. Set it to false to render the component in a hidden state. {% tabs %} {% highlight razor %} @@ -156,7 +156,7 @@ You can set the Speed Dial Component to visible/hidden state using [Visible](htt ## Tooltip -You can show tooltip on hover to show additional details to end-user by setting [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Title) property to speed dial items. +Show a tooltip on hover to provide additional details by setting the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Title) property for speed dial items. Tooltips are especially useful when using icon-only items. {% tabs %} {% highlight razor %} @@ -176,7 +176,7 @@ You can show tooltip on hover to show additional details to end-user by setting ## Opens on hover -You can use [OpensOnHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_OpensOnHover) property to open actions items on hover itself. By default action items displayed only when clicking the speed dial button. +Use the [OpensOnHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_OpensOnHover) property to open action items on hover. By default, action items open on click. {% tabs %} {% highlight razor %} @@ -198,7 +198,7 @@ You can use [OpensOnHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz ## Customized icon -You can use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_CssClass) property to customize the appearance of the speedDial component in its default primary state. Below example demonstrates the `cssClass` property usage in speedDial. +Use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_CssClass) property to customize the appearance of the SZpeedDial component in its default state. Below example below demonstrates the `cssClass` property usage in speedDial. {% tabs %} {% highlight razor %} diff --git a/blazor/speeddial/template.md b/blazor/speeddial/template.md index c7d119e316..e19912bd01 100644 --- a/blazor/speeddial/template.md +++ b/blazor/speeddial/template.md @@ -9,11 +9,11 @@ documentation: ug # Template in Blazor SpeedDial Component -This section explains available templates in Speed Dial Component and its usage. +This section describes the available templates in the SpeedDial component and their usage for customizing item content and the popup container. ## Item template -You can use the [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemTemplate) to set a template content for the `SpeedDialItem`. The template content is defined as a child content of `ItemTemplate` tag directive. +Use the [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemTemplate) to define custom content for each `SpeedDialItem`. Define the template as child content of the `ItemTemplate` tag directive. {% tabs %} {% highlight razor %} @@ -56,7 +56,7 @@ You can use the [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion. ## Popup template -You can use the [PopupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_PopupTemplate) to set a template content for popup of SpeedDial component. The template content is defined as a child content of `PopupTemplate` tag directive. +Use the [PopupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_PopupTemplate) to define custom content for the popup of the SpeedDial component. Define the template as child content of the `PopupTemplate` tag directive to render any custom layout or UI inside the popup. {% tabs %} {% highlight razor %} From aaa44ad25276f84ddd5656cafad9902b4e062d38 Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Mon, 13 Oct 2025 11:54:42 +0530 Subject: [PATCH 2/5] 983104: Updated the UG Documentation for Rating --- blazor/rating/accessibility.md | 50 +++++++++++----------- blazor/rating/appearance.md | 22 +++++----- blazor/rating/events.md | 6 +-- blazor/rating/getting-started-webapp.md | 56 ++++++++++++------------- blazor/rating/getting-started.md | 28 ++++++------- blazor/rating/labels.md | 20 ++++----- blazor/rating/precision-modes.md | 14 +++---- blazor/rating/selection.md | 18 ++++---- blazor/rating/templates.md | 30 +++++++------ blazor/rating/tooltip.md | 14 +++---- 10 files changed, 128 insertions(+), 130 deletions(-) diff --git a/blazor/rating/accessibility.md b/blazor/rating/accessibility.md index f74714e1d3..51c1ab383a 100644 --- a/blazor/rating/accessibility.md +++ b/blazor/rating/accessibility.md @@ -15,14 +15,14 @@ The accessibility compliance for the Blazor Rating component is outlined below. | Accessibility Criteria | Compatibility | | -- | -- | -| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Yes | -| [Section 508 Support](../common/accessibility#accessibility-standards) |Yes | -| [Screen Reader Support](../common/accessibility#screen-reader-support) | Yes | -| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | -| [Color Contrast](../common/accessibility#color-contrast) | Yes | -| [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | -| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Yes | -| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Yes | +| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Full support | +| [Section 508 Support](../common/accessibility#accessibility-standards) |Full support | +| [Screen Reader Support](../common/accessibility#screen-reader-support) | Full support | +| [Right-To-left Support](../common/accessibility#right-to-left-support) | Full support | +| [Color Contrast](../common/accessibility#color-contrast) | Full support | +| [Mobile Device Support](../common/accessibility#mobile-device-support) | Full support | +| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Full support | +| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Full support | -
Yes - All features of the component meet the requirement.
+
Full support - All features of the component meet the requirement.
-
Intermediate - Some features of the component do not meet the requirement.
+
Partial support - Some features of the component do not meet the requirement.
-
No - The component does not meet the requirement.
+
Not supported - The component does not meet the requirement.
## WAI-ARIA attributes -The Blazor Rating component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Rating component: +The Blazor Rating component follows the [WAI-ARIA slider pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) to meet accessibility requirements. The following ARIA attributes are used in the Blazor Rating component: | Attributes | Purpose | | ------------ | ----------------------- | -| `role=slider` | It defines an input where the user selects a value from within a specified range. | -| `role=button` | Specifies that the reset is a clickable element that resets the rating to its minimum value. | -| `aria-label` | Provides an accessible name for Rating. | -| `aria-valuemin` | It defines the minimum value of rating. | -| `aria-valuemax` | It defines the maximum value of rating. | -| `aria-valuenow` | It defines the current value of rating. | -| `aria-hidden` | It specifies whether the reset button is interactive or not. | +| `role=slider` | Defines an input where the user selects a value from within a specified range. | +| `role=button` | Indicates that the reset control is clickable and resets the rating to its minimum value. | +| `aria-label` | Provides an accessible name for the Rating component. | +| `aria-valuemin` | Defines the minimum rating value. | +| `aria-valuemax` | Defines the maximum rating value. | +| `aria-valuenow` | Announces the current rating value. | +| `aria-hidden` | Hides the element from assistive technologies when present. | ## Keyboard interaction -The Blazor Rating component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/slider/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Rating component. +The Blazor Rating component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/slider/#keyboardinteraction) guideline, improving accessibility for people who use assistive technologies and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Rating component. | Windows | Mac | Actions | |------------|-------------------| ---| -| Space | Space | When **Reset Button** is focused, resets to `min` value. | +| Space | Space | When the Reset button is focused, resets to the `min` value. | | ↑ | ↑ | Increases the value. | -| ← | ← | Decreases the value; in RTL mode, increases the value. | +| ← | ← | Decreases the value; in right-to-left mode, increases the value. | | ↓ | ↓ | Decreases the value. | -| → | → | Increases the value; in RTL mode, decreases the value. | +| → | → | Increases the value; in right-to-left mode, decreases the value. | ## Ensuring accessibility -The Blazor Rating component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Blazor Rating component’s accessibility is verified using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests. -The accessibility compliance of the Blazor Rating component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/rating) in a new window to evaluate the accessibility of the Blazor Rating component with accessibility tools. +The accessibility compliance of the Blazor Rating component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/rating) in a new window to evaluate the component with accessibility tools. ## See also diff --git a/blazor/rating/appearance.md b/blazor/rating/appearance.md index 2bc9db80ce..e9ed0bb5c9 100644 --- a/blazor/rating/appearance.md +++ b/blazor/rating/appearance.md @@ -9,7 +9,7 @@ documentation: ug # Appearance in Blazor Rating Component -You can also customize the appearance of rating component. +The appearance of the Blazor Rating component can be customized to match application design requirements. ## Items count @@ -23,13 +23,13 @@ You can specify the number of rating items using the [ItemsCount](https://help.s ``` -In this example, the rating component will display `8` rating items. The `Value` property specifies the number of rating items that should be filled, so in this case `3` of the `8` rating items will be filled. +In this example, the rating component displays 8 rating items. The `Value` property specifies how many items appear filled, so 3 of the 8 items are filled. ![Blazor Rating Component with ItemsCount](images/blazor-rating-items-count.png) ## Disabled -You can disable the Syncfusion® Blazor Rating component by using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Disabled) property. When the `Disabled` property is set to `true`, the rating component will be disabled and the user will not be able to interact with it and a disabled rating component may have a different visual appearance than an enabled one. +Disable the Syncfusion® Blazor Rating component by using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Disabled) property. When the `Disabled` property is set to `true`, the rating component will be disabled and the user will not be able to interact with it and a disabled rating component may have a different visual appearance than an enabled one. ```cshtml @@ -43,7 +43,7 @@ You can disable the Syncfusion® Blazor Rati ## Visible -You can use the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Visible) property of the Blazor Rating component to control the visibility of the component. When the `Visible` property is set to `true`, the rating component will be visible on the page. When it is set to `false`, the component will be hidden. +Use the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Visible) property of the Blazor Rating component to control the visibility of the component. When the `Visible` property is set to `true`, the rating component will be visible on the page. When it is set to `false`, the component will be hidden. ```cshtml @@ -57,7 +57,7 @@ You can use the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo ## Read only -You can use the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_ReadOnly) property of the Blazor Rating component to make the component non-interactive and prevent the user from changing the rating value. +Use the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_ReadOnly) property of the Blazor Rating component to make the component non-interactive and prevent changes to the rating value via mouse or keyboard. ```cshtml @@ -71,11 +71,11 @@ You can use the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz ## CssClass -You can customize the appearance of the rating component, such as by changing its colors, fonts, sizes, or other visual aspects by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_CssClass) property. +Customize the appearance of the rating component, such as by changing its colors, fonts, sizes, or other visual aspects by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_CssClass) property. ### Changing rating symbol border color -You can change the rating icon border color in Blazor Rating component, you can use the `CssClass` property and set the `text-stroke` CSS property of `.e-rating-icon` to your desired border color. +Change the rating icon border color in Blazor Rating component, you can use the `CssClass` property and set the `text-stroke` CSS property of `.e-rating-icon` to your desired border color. ```cshtml @@ -97,7 +97,7 @@ You can change the rating icon border color in Blazor Rating component, you can ### Changing rated/un-rated symbol fill color -You can customize the fill colors of rated and un-rated icons in the Rating component using the `CssClass` property and the `linear-gradient` color-stops in the `background` CSS property of `.e-rating-icon`. The **first** color-stop defines the rated fill color and the **second** defines the un-rated fill color. +Customize the fill colors of rated and un-rated icons in the Rating component using the `CssClass` property and the `linear-gradient` color-stops in the `background` CSS property of `.e-rating-icon`. The **first** color-stop defines the rated fill color and the **second** defines the un-rated fill color. ```cshtml @@ -117,13 +117,13 @@ You can customize the fill colors of rated and un-rated icons in the Rating comp ``` -This will customize the rated fill color to `#ffe814` and un-rated fill color to `#d8d7d4`. `--rating-value` in the linear-gradient provides the current value of the rating item. +This customizes the rated fill color to `#ffe814` and the unrated fill color to `#d8d7d4`. The `--rating-value` custom property in the gradient reflects the current value of the rating item. ![Blazor Rating Component with custom fill color for icons](images/blazor-rating-fill-color.png) ### Changing the item spacing -You can change the space between the rating items in Blazor Rating component, by using the `CssClass` property and setting the `margin` / `padding` CSS property of `.e-rating-item-container` to your desired size. +To change the space between rating items in the Blazor Rating component, use the `CssClass` property and set the `margin` or `padding` of `.e-rating-item-container` to the desired size. ```cshtml @@ -144,7 +144,7 @@ You can change the space between the rating items in Blazor Rating component, by ## Changing icon using CssClass -You can change the rating item icon in Blazor Rating component, you can use the `CssClass` property and set the `content` CSS property of `.e-icons.e-star-filled:before` to your desired font icon. +To change the rating item icon in the Blazor Rating component, use the `CssClass` property and set the `content` of `.e-icons.e-star-filled:before` to the desired font icon. ```cshtml diff --git a/blazor/rating/events.md b/blazor/rating/events.md index add2ec773b..50eb38333b 100644 --- a/blazor/rating/events.md +++ b/blazor/rating/events.md @@ -13,7 +13,7 @@ This section describes the rating events that will be triggered when appropriate ## Created -The rating component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Created) event when the rendering of the rating component is completed. +The rating component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Created) event after the component rendering is completed. Use this event for initialization logic that depends on the rendered UI. ```cshtml @@ -32,7 +32,7 @@ The rating component triggers the [Created](https://help.syncfusion.com/cr/blazo ## ValueChanged -The rating component triggers the [ValueChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_ValueChanged) event when the value of the rating is changed. The changed value is passed as the event argument. +The rating component triggers the [ValueChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_ValueChanged) event when the rating value changes. The new value is passed as the event argument. ```cshtml @@ -51,7 +51,7 @@ The rating component triggers the [ValueChanged](https://help.syncfusion.com/cr/ ## OnItemHover -The rating component triggers the [OnItemHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_OnItemHover) event when the rating item is hovered. The [RatingHoverEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.RatingHoverEventArgs.html) passed as an event argument provides the details of the hovered item. +The rating component triggers the [OnItemHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_OnItemHover) event when a rating item is hovered. The [RatingHoverEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.RatingHoverEventArgs.html) in the event provides details such as the hovered item’s index and value. ```cshtml diff --git a/blazor/rating/getting-started-webapp.md b/blazor/rating/getting-started-webapp.md index 324e31ca98..9b80a68519 100644 --- a/blazor/rating/getting-started-webapp.md +++ b/blazor/rating/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Rating in Blazor Web App -This section briefly explains about how to include `Blazor Rating` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to add the Blazor Rating component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include `Blazor Rating` component in ## 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) 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) 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=windows) while creating a Blazor Web Application. +Configure the appropriate [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=windows) when creating the Blazor Web App. ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add **Blazor Rating** 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Rating** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) 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 using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -54,11 +54,11 @@ N> Syncfusion® Blazor components are availa ## 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). +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). -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 appropriate [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 the application. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, for a Blazor Web App with the `Auto` interactive render mode, run: {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,15 +70,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For details on creating a **Blazor Web App** with different interactive modes and locations, see the [render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes) guidance. ## Install Syncfusion® Blazor Inputs 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 using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in 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. -* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the terminal is open in the project directory that contains the `.csproj` file. +* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies. {% tabs %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -102,10 +102,10 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** from the client project. | +| Server | Open **~/_Imports.razor** located in the `Components` folder. | -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace . +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` 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 your 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 (Server and Client) of your Blazor Web App. {% 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. In that case, register the Syncfusion® Blazor service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -175,7 +175,7 @@ var app = builder.Build(); ## 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: +The theme stylesheet and script are provided via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet in the `` and the script at the end of the `` in the **~/Components/App.razor** file: ```html @@ -189,11 +189,11 @@ 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> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for additional theme options (such as Fluent or Bootstrap 5) and referencing 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 script reference approaches, see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Syncfusion® Blazor Rating component -Add the Syncfusion® Blazor Rating component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +Add the Syncfusion® Blazor Rating component in a **~Pages/.razor** file. If the interactivity location is `Per page/component`, define a render mode at the top of the `~Pages/.razor` component as shown: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor Rating component | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -221,13 +221,13 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Rating component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. The Syncfusion® Blazor Rating component will render in the default browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/htBpNMqZALaYvkYW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rating Component](images/blazor-rating-component.png)" %} ## Value -You can set the rating value by using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Value) property. +Set the rating using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Value) property. {% tabs %} {% highlight razor %} @@ -239,4 +239,4 @@ You can set the rating value by using the [Value](https://help.syncfusion.com/cr {% previewsample "https://blazorplayground.syncfusion.com/embed/LDLTXiKDggXVnBqJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Rating Value in Blazor Rating Component](images/blazor-rating-value.png)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Rating/BlazorWebApp). +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Rating/BlazorWebApp). \ No newline at end of file diff --git a/blazor/rating/getting-started.md b/blazor/rating/getting-started.md index 492c602d31..68e34d8407 100644 --- a/blazor/rating/getting-started.md +++ b/blazor/rating/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor Rating Component -This section briefly explains about how to include `Blazor Rating` component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to add the Blazor Rating component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code. -To get started quickly with the Blazor Rating component, you can check out this video. +To get started quickly with the Blazor Rating component, watch the following video overview that demonstrates installation, configuration, and basic usage. {% youtube "youtube:https://www.youtube.com/watch?v=yWhINyylnTU"%} @@ -25,11 +25,11 @@ To get started quickly with the Blazor Rating component, you can check out this ## Create a new Blazor 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 Inputs and Themes NuGet in the App -To add **Blazor Rating** 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) 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 the **Blazor Rating** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -40,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -52,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## 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 commands in the terminal (Ctrl+`). {% tabs %} @@ -70,8 +70,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Inputs 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. -* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project root directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies. {% tabs %} @@ -85,7 +85,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -93,7 +93,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. +Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -137,7 +137,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> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for different theme options (such as Bootstrap 5, Fluent, or Material) and referencing 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 script reference approaches, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Syncfusion® Blazor Rating component @@ -151,7 +151,7 @@ Add the Syncfusion® Blazor Rating component {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Rating component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Rating component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/htBpNMqZALaYvkYW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rating Component](images/blazor-rating-component.png)" %} @@ -167,4 +167,4 @@ You can set the rating value by using the [Value](https://help.syncfusion.com/cr {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLTXiKDggXVnBqJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Rating Value in Blazor Rating Component](images/blazor-rating-value.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLTXiKDggXVnBqJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Rating Value in Blazor Rating Component](images/blazor-rating-value.png)" %} \ No newline at end of file diff --git a/blazor/rating/labels.md b/blazor/rating/labels.md index bdc8fbc795..d49affcaa4 100644 --- a/blazor/rating/labels.md +++ b/blazor/rating/labels.md @@ -9,7 +9,7 @@ documentation: ug # Labels in Blazor Rating Component -You can use the [ShowLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_ShowLabel) property to display a label that shows the current value of the rating. When the `ShowLabel` property is set to `true`, a label will be displayed. +Use the [ShowLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_ShowLabel) property to display a label that shows the current rating value. By default, `ShowLabel` is `false`. When set to `true`, the label is rendered. ```cshtml @@ -19,18 +19,18 @@ You can use the [ShowLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla ``` -![Blazor Rating Component with Label](./images/blazor-rating-label.png) +![Blazor Rating component with Label](./images/blazor-rating-label.png) ## Label position -The Rating component allows you to place the label on the top, bottom, left, or right side of the rating using the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_LabelPosition) property. +Control where the label appears using the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_LabelPosition) property. The default position is `Right`. In right-to-left layouts, left and right positions follow RTL direction. The following label positions are supported: -* Top: The label is placed on the top of the rating. -* Bottom: The label is placed on the bottom of the rating. -* Left: The label is placed on the left side of the rating. -* Right: The label is placed on the right side of the rating. +* Top: The label appears above the rating. +* Bottom: The label appears below the rating. +* Left: The label appears on the left side of the rating. +* Right: The label appears on the right side of the rating. ```cshtml @@ -50,12 +50,12 @@ The following label positions are supported: ``` -![Blazor Rating Component with different label positions](./images/blazor-rating-label-positions.png) +![Blazor Rating component with different label positions](./images/blazor-rating-label-positions.png) ## Label template -You can use the [LabelTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_LabelTemplate) tag directive to specify a custom template for the `Label` of the rating. The current value of the rating will be passed as the `context` when building the content of the label. This allows you to include dynamic information about the rating in the template. +Use the [LabelTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_LabelTemplate) tag directive to provide custom content for the label. The current rating value (passed as the `context`, a double) is available when building the label content. When a template is provided and `ShowLabel` is `true`, the template replaces the default label. ```cshtml @@ -67,4 +67,4 @@ You can use the [LabelTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion ``` -![Blazor Rating Component with Label template](./images/blazor-rating-label-template.png) \ No newline at end of file +![Blazor Rating component with Label template](./images/blazor-rating-label-template.png) \ No newline at end of file diff --git a/blazor/rating/precision-modes.md b/blazor/rating/precision-modes.md index db4a24f894..6d416957e3 100644 --- a/blazor/rating/precision-modes.md +++ b/blazor/rating/precision-modes.md @@ -9,14 +9,14 @@ documentation: ug # Precision Modes in Blazor Rating Component -You can use the [Precision](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Precision) property of the Blazor Rating component to provide ratings with varying levels of precision. +Use the [Precision](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Precision) property of the Blazor Rating component to control how finely users can select values. The default precision is `Full`. Interaction by mouse and keyboard follows the selected precision step. -The precision types of Rating are as follows: +The Blazor Rating component supports the following precision modes: -* Full: The rating is increased in whole number increments. For example, if the current rating is 2, the next possible ratings are 3, 4, and so on. -* Half: The rating is increased in increments of 0.5 (half). For example, if the current rating is 2.5, the next possible ratings are 3, 3.5, 4, and so on. -* Quarter: The rating is increased in increments of 0.25 (quarter). For example, if the current rating is 3.75, the next possible ratings are 4, 4.25, 4.5, and so on. -* Exact: The rating is increased in increments of 0.1. For example, if the current rating is 3.9, the next possible ratings are 4, 4.1, 4.2, and so on. +* Full: Increases in whole-number steps (1.0). For example, from 2 the next possible ratings include 3, 4, and so on. +* Half: Increases in 0.5 steps. For example, from 2.5 the next possible ratings include 3, 3.5, 4, and so on. +* Quarter: Increases in 0.25 steps. For example, from 3.75 the next possible ratings include 4, 4.25, 4.5, and so on. +* Exact: Increases in 0.1 steps. For example, from 3.9 the next possible ratings include 4, 4.1, 4.2, and so on. ```cshtml @@ -36,4 +36,4 @@ The precision types of Rating are as follows: ``` -![Blazor Rating Component with different Precision Types](./images/blazor-rating-precision-types.png) \ No newline at end of file +![Blazor Rating component with different Precision Types](./images/blazor-rating-precision-types.png) \ No newline at end of file diff --git a/blazor/rating/selection.md b/blazor/rating/selection.md index 3326f055b2..5d8ce8e476 100644 --- a/blazor/rating/selection.md +++ b/blazor/rating/selection.md @@ -9,7 +9,7 @@ documentation: ug # Selection in Blazor Rating Component -The Blazor Rating component allows users to rate something using a visual scale, and the selection state can be changed by the user clicking or tapping on the stars in the rating scale or through code. The Rating component has a minimum value and a reset button, and provides customization options for the selected rating value and selection behavior. +The Blazor Rating component lets users choose a value using a visual scale. Selection can be changed by clicking or tapping the icons, or programmatically. Key options include the current value, minimum value, single-selection behavior, and an optional reset button. ```cshtml @@ -20,11 +20,11 @@ The Blazor Rating component allows users to rate something using a visual scale, ``` -![Blazor Rating Component with Selction](./images/blazor-rating-selection.png) +![Blazor Rating component with selection](./images/blazor-rating-selection.png) ## Selected value -You can use the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Value) property of the Blazor Rating component to determine the currently selected rating value and update it using two-way binding or by setting the value programmatically. The current rating value can also be used to identify the selected items. +Use the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Value) property to get or set the currently selected rating. The value is a double and can be updated with two-way binding or by setting it programmatically. The selected value determines which items are rendered as selected and respects the configured precision, minimum, and item count. ```cshtml @@ -43,7 +43,7 @@ Rated Value : @value ## Min value -You can use the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Min) property of the Blazor Rating component to set the minimum possible rating value the user can select. If you set the `Min` property to 2, then you will not be able to select a rating lower than 2. +Use the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Min) property to set the lowest selectable rating. For example, if `Min` is 2, selecting a value lower than 2 is not permitted. If the current `Value` is below `Min`, it snaps to the minimum. ```cshtml @@ -53,11 +53,11 @@ You can use the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.In ``` -![Blazor Rating Component with Minimum Value](./images/blazor-rating-min.png) +![Blazor Rating component with a minimum value enforced](./images/blazor-rating-min.png) ## Single selection -You can use the [EnableSingleSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_EnableSingleSelection) property of the Blazor Rating component to select only one item at a time. When the `EnableSingleSelection` property is set to `true`, only the selected item will be considered to be in the selected state, while all other items will be unselected. +Use the [EnableSingleSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_EnableSingleSelection) property to visually select only one item at a time. When set to `true`, only the chosen item appears selected while the others appear unselected. The `Value` still reflects the selected item index according to the configured precision. ```cshtml @@ -67,11 +67,11 @@ You can use the [EnableSingleSelection](https://help.syncfusion.com/cr/blazor/Sy ``` -![Blazor Rating Component with Single Selection](./images/blazor-rating-single-selection.png) +![Blazor Rating component with single-selection](./images/blazor-rating-single-selection.png) ## Show or hide reset button -You can reset the rating value to its default by using the [AllowReset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_AllowReset) property of the Blazor Rating component. When the `AllowReset` property is set to `true`, a reset button will be shown that allows the user to reset the rating value to its default. +Use the [AllowReset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_AllowReset) property to display a reset button. When `AllowReset` is `true`, a reset control appears that resets the rating to the `Min` value. By default, `AllowReset` is `false`. ```cshtml @@ -81,4 +81,4 @@ You can reset the rating value to its default by using the [AllowReset](https:// ``` -![Blazor Rating Component with Reset button](./images/blazor-rating-allow-reset.png) \ No newline at end of file +![Blazor Rating component with reset button](./images/blazor-rating-allow-reset.png) \ No newline at end of file diff --git a/blazor/rating/templates.md b/blazor/rating/templates.md index 513baa65f2..3c092ab34b 100644 --- a/blazor/rating/templates.md +++ b/blazor/rating/templates.md @@ -9,18 +9,16 @@ documentation: ug # Templates in Blazor Rating Component -The Blazor Rating component allows you to customize the appearance of the rating items using templates. You can use templates to specify a custom layout for the rating items, which can include any content you want. This allows you to create a more customized and interactive rating experience for the user. +The Blazor Rating component supports templates to customize the appearance of rating items. Templates let you define custom content for items to create tailored and interactive experiences. -The rating component supports below templates for item customization. +The rating component supports the following templates for item customization: -* [EmptyTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_EmptyTemplate) -* [FullTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_FullTemplate) +* [EmptyTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_EmptyTemplate): Template applied to unrated items. +* [FullTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_FullTemplate): Template applied to rated items. ## Empty (unrated) symbol template -To customize the appearance of **unrated** items, you can use the `EmptyTemplate` tag directive. It allows you to specify the desired custom content for the unrated items. -The [RatingItemContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.RatingItemContext.html) is passed as a `context` to the template, allowing it to access information about the un-rated item, such as its `Value` and `Index`. -If the `FullTemplate` is not defined, the `EmptyTemplate` will be used as the default for both rated and unrated items. You can apply custom styles to differentiate between the rated and unrated states of the items. +Use the `EmptyTemplate` tag directive to customize the appearance of unrated items. The [RatingItemContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.RatingItemContext.html) is passed as the `context` to the template and provides information such as the item `Value` and `Index`. If `FullTemplate` is not defined, `EmptyTemplate` is used for both rated and unrated items; custom styles can differentiate the states for visual clarity. ```cshtml @@ -71,9 +69,9 @@ If the `FullTemplate` is not defined, the `EmptyTemplate` will be used as the de ``` -![Blazor Rating Component with EmptyTemplate](./images/blazor-rating-empty-template.png) +![Blazor Rating component with EmptyTemplate](./images/blazor-rating-empty-template.png) -N> The current value of the rating item available in the template context (`RatingItemContext`) as `Value` and in the rating item element as CSS Variable (`--rating-value`) can be used to support precision in templates. +N> The current value of the rating item is available in the template context (`RatingItemContext`) as `Value` and `Index`. The rating item element also exposes a CSS custom property (`--rating-value`) representing the filled portion, which can be used to support precision in templates. ## Full (rated) symbol template @@ -131,11 +129,11 @@ The [RatingItemContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -![Blazor Rating Component with FullTemplate](./images/blazor-rating-full-template.png) +![Blazor Rating component with FullTemplate](./images/blazor-rating-full-template.png) ## Using Emoji icon as rating symbol -You can use emojis of your choice as rating symbol by specifying them as template content within the `EmptyTemplate` tag directive. +Use emoji as rating symbols by placing them as template content within the `EmptyTemplate` tag directive. This approach works well with single selection and animations disabled for a clean experience. ```cshtml @@ -177,11 +175,11 @@ You can use emojis of your choice as rating symbol by specifying them as templat ``` -![Blazor Rating Component with Emoji Icon](./images/blazor-rating-emoji-icon.png) +![Blazor Rating component with Emoji icon](./images/blazor-rating-emoji-icon.png) ## Using SVG icon as rating symbol -You can use SVG icons of your choice as rating symbol by specifying them as template content within the `EmptyTemplate` and `FullTemplate` tag directives. +Use SVG icons as rating symbols by specifying them as template content within the `EmptyTemplate` and `FullTemplate` tag directives. Gradients can be applied per item using unique IDs derived from the item index. ```cshtml @@ -245,11 +243,11 @@ You can use SVG icons of your choice as rating symbol by specifying them as temp ``` -![Blazor Rating Component with SVG Icon](./images/blazor-rating-svg-icon.png) +![Blazor Rating component with SVG icon](./images/blazor-rating-svg-icon.png) ## Using PNG image as rating symbol -You can use PNG images of your choice as rating symbol by specifying them as template content within the `EmptyTemplate` and `FullTemplate` tag directives. +Use PNG images as rating symbols by specifying them as template content within the `EmptyTemplate` and `FullTemplate` tag directives. ```cshtml @@ -271,4 +269,4 @@ You can use PNG images of your choice as rating symbol by specifying them as tem ``` -![Blazor Rating Component with PNG Icon](./images/blazor-rating-png.png) \ No newline at end of file +![Blazor Rating component with PNG icon](./images/blazor-rating-png.png) \ No newline at end of file diff --git a/blazor/rating/tooltip.md b/blazor/rating/tooltip.md index d1997fd3a6..c830f22f18 100644 --- a/blazor/rating/tooltip.md +++ b/blazor/rating/tooltip.md @@ -9,7 +9,7 @@ documentation: ug # Tooltip in Blazor Rating Component -The Blazor rating component supports tooltip to show additional information in rating items by setting the [ShowTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_ShowTooltip) property. If enabled, the tooltip appears when the user hovers over a rating item. +The Blazor Rating component supports tooltips that display additional information for rating items by enabling the [ShowTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_ShowTooltip) property. When enabled (default is `false`), a tooltip appears when the user hovers over a rating item. ```cshtml @@ -19,11 +19,11 @@ The Blazor rating component supports tooltip to show additional information in r ``` -![Blazor Rating Component with Tooltip](./images/blazor-rating-tooltip.png) +![Blazor Rating component with tooltip](./images/blazor-rating-tooltip.png) ## Tooltip template -You can use the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_TooltipTemplate) tag directive to specify a custom template for the `Tooltip` of the rating. The current value of the rating will be passed as the `context` when building the content of the tooltip. This allows you to include dynamic information about the rating in the template. +Use the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_TooltipTemplate) tag directive to define custom content for the tooltip. The current item’s value is passed to the template as the `context` (a double), allowing dynamic tooltip content based on the hovered item. ```cshtml @@ -37,13 +37,13 @@ You can use the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusi ``` -![Blazor Rating Component with Tooltip Template](./images/blazor-rating-tooltip-template.png) +![Blazor Rating component with tooltip template](./images/blazor-rating-tooltip-template.png) ## Tooltip customization -You can customize the appearance of the tooltips using the `CssClass` property of the Blazor Rating component and by defining the custom styles for tooltip elements like the below example. +Customize the appearance of tooltips by assigning a custom CSS class using the `CssClass` property on the Blazor Rating component and writing styles scoped to that class. The class is applied to the component’s root element, which lets you target the nested tooltip elements without affecting other tooltips. -N> You can find more information about customizing the appearance of the tooltip in the [Tooltip Customization](https://blazor.syncfusion.com/documentation/tooltip/style) documentation. +N> For more details on styling options, refer to the [tooltip customization](https://blazor.syncfusion.com/documentation/tooltip/style) documentation. For accessibility, ensure tooltip text is concise, meaningful, and readable. Tooltips should supplement visible information. ```cshtml @@ -82,4 +82,4 @@ N> You can find more information about customizing the appearance of the tooltip ``` -![Blazor Rating Component with Tooltip Customization](./images/blazor-rating-custom-tooltip.png) \ No newline at end of file +![Blazor Rating component with tooltip customization](./images/blazor-rating-custom-tooltip.png) \ No newline at end of file From 8c945505eef936d996d89f57cc6e9324631fb9db Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Mon, 13 Oct 2025 13:19:40 +0530 Subject: [PATCH 3/5] 983104: Updated the UG Documentation for RangeSlider --- blazor/range-slider/accessibility.md | 46 ++++++++--------- blazor/range-slider/format.md | 17 +++---- blazor/range-slider/getting-started-webapp.md | 50 +++++++++---------- blazor/range-slider/getting-started.md | 32 ++++++------ .../how-to/customize-slider-ticks-label.md | 6 +-- .../range-slider/how-to/customize-the-bar.md | 14 +++--- .../how-to/customize-the-limits.md | 6 +-- .../how-to/customize-the-thumb.md | 4 +- .../range-slider/how-to/date-range-slider.md | 4 +- .../how-to/numeric-range-slider.md | 14 ++++-- .../range-slider/how-to/reversible-slider.md | 4 +- .../how-to/slider-inside-dialog.md | 4 +- .../range-slider/how-to/time-range-slider.md | 4 +- blazor/range-slider/how-to/validate.md | 6 +-- blazor/range-slider/limits.md | 18 +++---- blazor/range-slider/localization.md | 2 +- blazor/range-slider/orientation.md | 2 +- blazor/range-slider/style.md | 2 +- blazor/range-slider/ticks.md | 8 +-- blazor/range-slider/tooltip.md | 10 ++-- blazor/range-slider/types.md | 13 +++-- 21 files changed, 134 insertions(+), 132 deletions(-) diff --git a/blazor/range-slider/accessibility.md b/blazor/range-slider/accessibility.md index 0642d1c377..c5b0642df2 100644 --- a/blazor/range-slider/accessibility.md +++ b/blazor/range-slider/accessibility.md @@ -17,8 +17,8 @@ The accessibility compliance for the Blazor Range Slider component is outlined b | Accessibility Criteria | Compatibility | | -- | -- | -| [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | Yes | -| [Section 508](https://www.section508.gov/) Support | Yes | +| [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | Full support | +| [Section 508](https://www.section508.gov/) Support | Full support | | Screen Reader Support | Yes | | Right-To-Left Support | Yes | | Color Contrast | Yes | @@ -33,45 +33,45 @@ The accessibility compliance for the Blazor Range Slider component is outlined b } -
Yes - All features of the component meet the requirement.
+
Full support - All features of the component meet the requirement.
-
Partial - Some features of the component do not meet the requirement.
+
Partial support - Some features of the component do not meet the requirement.
-
No - The component does not meet the requirement.
+
Not supported - The component does not meet the requirement.
## WAI-ARIA attributes -The Blazor Range Slider component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) patterns to meet the accessibility. The following ARIA attributes are used in the Range Slider component: +The Blazor Range Slider component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) pattern to meet accessibility requirements. The following ARIA attributes are used in the Range Slider component: | **Attributes** | **Purpose** | | --- | --- | -| `aria-valuenow` | It indicates the current value of the slider. | -| `aria-valuetext`| It returns the current text of the slider. | -| `aria-valuemin` | It indicates the minimum value of the slider. | -| `aria-valuemax` | It indicates the maximum value of the slider. | -| `aria-orientation` | It indicates the Slider Orientation. | -| `aria-label` | Slider left and right button label text (increment and decrement). | -| `aria-labelledby` | It indicates the name of the Slider. | +| `aria-valuenow` | Indicates the current value of the slider. | +| `aria-valuetext`| Provides a human-readable text alternative for the current value. | +| `aria-valuemin` | Indicates the minimum value of the slider. | +| `aria-valuemax` | Indicates the maximum value of the slider. | +| `aria-orientation` | Indicates the slider orientation. | +| `aria-label` | Defines an accessible name for controls (for example, increment or decrement). | +| `aria-labelledby` | References the element that provides the accessible name for the slider. | ## Keyboard interaction -The Keyboard interaction of the Blazor Range Slider component is designed based on the [WAI-ARIA Practices](https://www.w3.org/TR/wai-aria-practices/#slider) described for Slider. Users can use the following shortcut keys to interact with the Slider. +Keyboard interaction of the Blazor Range Slider component is based on the [WAI-ARIA Practices](https://www.w3.org/TR/wai-aria-practices/#slider) described for sliders. Use the following shortcut keys to interact with the slider. | Windows | Mac | Actions | | --- | --- | --- | -| ↑ or → | ↑ or → | Increase the Slider value.| -| ↓ , ← | ↓ or ← | Decrease the Slider value. | -| Home | Home | Moves to the start value (for Range Slider when the second thumb is focused and the Home key is pressed, it moves to the first thumb value). | -| End | End | Moves to the end value (for Range Slider when the first thumb is focused and the End key is pressed, it moves to the second thumb value). | -| Page Up | Page Up | Increases the Slider by `LargeStep` value. | -| Page Down | Page Down | Decreases the Slider by `LargeStep` value. | +| ↑ or → | ↑ or → | Increase the slider value. | +| ↓ or ← | ↓ or ← | Decrease the slider value. | +| Home | Home | Move to the start value (for range sliders, when the second thumb is focused and Home is pressed, it moves to the first thumb’s value). | +| End | End | Move to the end value (for range sliders, when the first thumb is focused and End is pressed, it moves to the second thumb’s value). | +| Page Up | Page Up | Increase by the `LargeStep` value. | +| Page Down | Page Down | Decrease by the `LargeStep` value. | ## Ensuring accessibility -The Blazor Range Slider component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing. +The Blazor Range Slider component’s accessibility is validated using the [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) tool during automated testing. -The accessibility compliance of the Range Slider component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/slider) in a new window to evaluate the accessibility of the Range Slider component with accessibility tools. +The accessibility compliance of the Range Slider component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/slider) in a new window to evaluate the Range Slider component with accessibility tools. ## See also -* [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) +* [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file diff --git a/blazor/range-slider/format.md b/blazor/range-slider/format.md index a49a7bcf64..3901e4d7b9 100644 --- a/blazor/range-slider/format.md +++ b/blazor/range-slider/format.md @@ -9,11 +9,10 @@ documentation: ug # Formatting in Blazor Range Slider Component -The [`Format`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_Format) feature used to customize the units of Slider values to desired format. The formatted values will also be applied to the ARIA attributes of the slider. There are two ways of achieving formatting in slider. +The [`Format`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_Format) feature is used to customize the units and appearance of slider values. Formatted values are also applied to the ARIA attributes of the slider to ensure accessible output. There are two ways to apply formatting in the slider. -* Use the `Format` API of slider which utilizes our **Internationalization** to format values. - -* Customize using the events namely [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange). +* Use the `Format` API of the slider, which leverages the built-in internationalization and .NET standard format strings. +* Customize formatting using the [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange) events. ```cshtml @using Syncfusion.Blazor.Inputs @@ -28,11 +27,11 @@ The [`Format`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.Sl } ``` -![Formating in Blazor RangeSlider](images/blazor-rangeslider-format.gif) +![Formatting values in the Blazor Range Slider](images/blazor-rangeslider-format.gif) ## Using format API -Slider provides different predefined formatting styles like Numeric (N), Percentage (P), Currency (C) and # specifiers. +Slider provides predefined formatting styles such as Numeric (`N`), Percentage (`P`), Currency (`C`), and custom numeric format strings (for example, `#`). These formats are culture-aware and use the application’s current culture for symbols and separators. ```cshtml @using Syncfusion.Blazor.Inputs @@ -48,11 +47,11 @@ Slider provides different predefined formatting styles like Numeric (N), Percent ``` -![Blazor Range Slider Format API](images/blazor-rangeslider-format-api.gif) +![Blazor Range Slider format API](images/blazor-rangeslider-format-api.gif) ## Using Events -For custom formatting use event handlers like [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange). Below is an example where slider values are formatted into weekdays and corresponding tooltip values are formatted as days of the week. +For custom scenarios, use event handlers like [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange). The following example formats tick labels as weekday names and tooltips as day numbers. ```cshtml @using Syncfusion.Blazor.Inputs @@ -82,4 +81,4 @@ For custom formatting use event handlers like [`TicksRendering`](https://help.sy ``` -![Blazor Range Slider Events](images/blazor-rangeslider-format-using-events.png) \ No newline at end of file +![Blazor Range Slider events](images/blazor-rangeslider-format-using-events.png) \ No newline at end of file diff --git a/blazor/range-slider/getting-started-webapp.md b/blazor/range-slider/getting-started-webapp.md index 0ce7360f5f..fdf216c51a 100644 --- a/blazor/range-slider/getting-started-webapp.md +++ b/blazor/range-slider/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Range Slider in Blazor Web App -This section briefly explains about how to include [Blazor Range Slider](https://www.syncfusion.com/blazor-components/blazor-range-slider) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to add the [Blazor Range Slider](https://www.syncfusion.com/blazor-components/blazor-range-slider) component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor Range Slider](https:/ ## 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) 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) 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=windows) while creating a Blazor Web Application. +Configure the appropriate [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=windows) when creating the application. ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add **Blazor Range Slider** 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Range Slider** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) 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 using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, you can use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -54,11 +54,11 @@ N> Syncfusion® Blazor components are availa ## 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). +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). -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 appropriate [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 the application. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, for a Blazor Web App with the `Auto` interactive render mode, run: {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,15 +70,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For more information on creating a **Blazor Web App** with various interactive modes and locations, see the [render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes) guidance. ## Install Syncfusion® Blazor Inputs 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 using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in 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. -* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project root directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies. {% tabs %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -102,10 +102,10 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project. | +| Server | Open **~/_Imports.razor** file, which is located in the `Components` folder. | -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace . +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` 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 your 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 your Blazor Web App. {% 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`, your project will contain a single **~/Program.cs** file. In that case, register the Syncfusion® Blazor service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -189,11 +189,11 @@ 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> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for additional theme options (such as Bootstrap 5, Fluent, or Material) and referencing 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 script reference approaches, see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Syncfusion® Blazor Range Slider component -Add the Syncfusion® Blazor Range Slider component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +Add the Syncfusion® Blazor Range Slider component in the **~Pages/.razor** file. If the interactivity location is `Per page/component`, define a render mode at the top of the `~Pages/.razor` component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor Range Slider com | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -223,7 +223,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Range Slider component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Range Slider component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VthfZWAZKrFqBOlr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Slider Component](images/blazor-rangeslider.gif)" %} diff --git a/blazor/range-slider/getting-started.md b/blazor/range-slider/getting-started.md index 89bf5ed058..aaea1bd447 100644 --- a/blazor/range-slider/getting-started.md +++ b/blazor/range-slider/getting-started.md @@ -11,9 +11,9 @@ documentation: ug # Getting Started with Blazor Range Slider Component -This section briefly explains about how to include [Blazor Range Slider](https://www.syncfusion.com/blazor-components/blazor-range-slider) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to add the [Blazor Range Slider](https://www.syncfusion.com/blazor-components/blazor-range-slider) component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code. -To get start quickly with Blazor Range Slider component, you can check on this video. +To get started quickly with the Blazor Range Slider component, watch the following video overview. {% youtube "youtube:https://www.youtube.com/watch?v=UeSbfQtK-5I" %} @@ -28,11 +28,11 @@ To get start quickly with Blazor Range Slider component, you can check on this v ## Create a new Blazor 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&pivots=vs) 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-8.0&pivots=vs) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add **Blazor Range Slider** 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) 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 the **Blazor Range Slider** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -43,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -55,9 +55,9 @@ N> Syncfusion® Blazor components are availa ## 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-8.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 commands in the terminal (Ctrl+`). {% tabs %} @@ -73,8 +73,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Inputs 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. -* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project root directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies. {% tabs %} @@ -88,7 +88,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -96,7 +96,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -107,7 +107,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -131,7 +131,7 @@ await builder.Build().RunAsync(); ## 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. +The theme stylesheet and script are provided via NuGet as [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. ```html @@ -140,7 +140,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> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for different theme options (such as Bootstrap 5, Fluent, or Material) and referencing 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 script reference approaches, see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Blazor Range Slider component @@ -156,7 +156,7 @@ Add the Syncfusion® Blazor Range Slider com {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Range Slider component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Range Slider component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VthfZWAZKrFqBOlr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Slider Component](images/blazor-rangeslider.gif)" %} @@ -178,4 +178,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- [Getting Started with Syncfusion® Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -[Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +[Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/range-slider/how-to/customize-slider-ticks-label.md b/blazor/range-slider/how-to/customize-slider-ticks-label.md index eb8bc3a999..2aa71ec821 100644 --- a/blazor/range-slider/how-to/customize-slider-ticks-label.md +++ b/blazor/range-slider/how-to/customize-slider-ticks-label.md @@ -9,7 +9,7 @@ documentation: ug # Customize the tick label in Blazor Range Slider Component -Slider can be customized via CSS. By overriding the slider CSS classes, you can customize the ticks. The ticks in slider allows to easily identify the current value/values of the slider. It contains [`SmallStep`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_SmallStep) and [`LargeStep`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_LargeStep). By default, slider has class `e-tick` for slider ticks. You can override the class as per your requirement. Refer to the following code snippet to render ticks. +The slider’s tick appearance can be customized with CSS. By overriding the slider’s CSS classes, the tick marks (icons) and their styles can be tailored. Ticks help users identify current values on the slider. Tick generation is controlled by the [`SmallStep`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_SmallStep) and [`LargeStep`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_LargeStep) settings. By default, the slider uses the `e-tick` class for ticks. The example below appends a custom class during the `TicksRendering` event and injects a glyph via CSS to render custom tick icons. ```css .e-scale .e-tick.e-custom::before { @@ -19,7 +19,7 @@ Slider can be customized via CSS. By overriding the slider CSS classes, you can ``` -Here, the color for rendered ticks has been applied through nth-child(`child_number`). The color is applied to the value of the `child_number` in the slider. +In this example, individual tick colors are applied using the `:nth-child(child_number)` selector to target each tick element. ```css #ticks_slider .e-scale :nth-child(1)::before { @@ -165,4 +165,4 @@ Here, the color for rendered ticks has been applied through nth-child(`child_num ``` -![Customizing TicksLabel in Blazor RangeSlider](./../images/blazor-rangeslider-ticks-label.gif) \ No newline at end of file +![Customizing TicksLabel in the Blazor Range Slider](./../images/blazor-rangeslider-ticks-label.gif) \ No newline at end of file diff --git a/blazor/range-slider/how-to/customize-the-bar.md b/blazor/range-slider/how-to/customize-the-bar.md index 2052a7949c..a26fe642ba 100644 --- a/blazor/range-slider/how-to/customize-the-bar.md +++ b/blazor/range-slider/how-to/customize-the-bar.md @@ -9,7 +9,7 @@ documentation: ug # Customize the bar in Blazor Range Slider Component -Slider appearance can be customized through CSS. By overriding the slider CSS classes, you can customize the slider bar. The slider bar can be customized with different themes. By default, slider have class name `e-slider-track` for bar. The class can be overridden with our own color values like the following code snippet. +The slider’s appearance can be customized with CSS. By overriding the slider CSS classes, the slider bar can be styled to match application design requirements. The slider bar supports theme-based styling and can be further customized. By default, the slider uses the `e-slider-track` class for the track. Override the class with custom color values as shown in the following example. ```css #gradient_slider.e-control.e-slider .e-range { @@ -23,7 +23,7 @@ Slider appearance can be customized through CSS. By overriding the slider CSS cl } ``` -In this code snippet, it can be seen that the dynamic color of the slider is being changed. +In this example, the gradient background of the selection bar is customized to create a dynamic color effect. ```cshtml @@ -31,7 +31,7 @@ In this code snippet, it can be seen that the dynamic color of the slider is bei ``` -Color bar can be customized in quite a number of ways. +The color of the bar can be customized in several ways, including height, gradients, and dynamic CSS classes based on the current value. ```cshtml @using Syncfusion.Blazor.Inputs; @@ -184,16 +184,16 @@ Color bar can be customized in quite a number of ways. ``` -![Blazor RangeSlider with Bar](./../images/blazor-rangeslider-with-bar.gif) +![Blazor Range Slider with customized bar styles](./../images/blazor-rangeslider-with-bar.gif) ## Customizing the Range Slider Track with Color Segments You can enhance the Blazor Range Slider by defining different track colors for specific value ranges. This is done using the [`ColorRange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.ColorRange.html) child elements within the [`SliderColorRanges`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderColorRanges.html) tag. -**How It Works:** +**How it works:** * [``Start``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.ColorRange.html#Syncfusion_Blazor_Inputs_ColorRange_Start): Defines where the color segment begins. -* [``End``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.ColorRange.html#Syncfusion_Blazor_Inputs_ColorRange_End): Defines where the color segment stops. +* [``End``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.ColorRange.html#Syncfusion_Blazor_Inputs_ColorRange_End): Defines where the color segment ends. * [``Color``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.ColorRange.html#Syncfusion_Blazor_Inputs_ColorRange_Color): Specifies the color for the segment. ```cshtml @@ -226,4 +226,4 @@ You can enhance the Blazor Range Slider by defining different track colors for s ``` -![Blazor RangeSlider with track color](./../images/blazor-rangeslider-track.png) +![Blazor Range Slider with track color](./../images/blazor-rangeslider-track.png) diff --git a/blazor/range-slider/how-to/customize-the-limits.md b/blazor/range-slider/how-to/customize-the-limits.md index 86ea41d329..2a04998957 100644 --- a/blazor/range-slider/how-to/customize-the-limits.md +++ b/blazor/range-slider/how-to/customize-the-limits.md @@ -9,7 +9,7 @@ documentation: ug # Customize the limits in Blazor Range Slider Component -Slider appearance can be customized via CSS. By overriding the slider CSS classes, the slider limit bar can be customized. Here, the limit bar is customized with different background color. By default, the slider has class `e-limits` for limits bar. You can override the class with our own color values as given in the following code snippet. +The slider’s limits bar can be customized with CSS. By overriding the slider CSS classes, the limits region can be styled to match application design requirements. In this example, the limits bar is given a custom background color. By default, the limits bar uses the `e-limits` class. Override that class with your preferred color values as shown below. ```css .e-control-wrapper.e-slider-container.e-horizontal .e-limits { @@ -17,7 +17,7 @@ Slider appearance can be customized via CSS. By overriding the slider CSS classe } ``` -And on implementing the above code snippet in the below slider control's Blazor code, the overview would be like the one found below. +Apply the above CSS to the following sliders to visualize the customized limits bar. ```cshtml @using Syncfusion.Blazor.Inputs; @@ -89,4 +89,4 @@ And on implementing the above code snippet in the below slider control's Blazor ``` -![Customizing Limits in Blazor RangeSlider](./../images/blazor-rangeslider-custom-limits.gif) \ No newline at end of file +![Customizing the limits bar in the Blazor Range Slider](./../images/blazor-rangeslider-custom-limits.gif) \ No newline at end of file diff --git a/blazor/range-slider/how-to/customize-the-thumb.md b/blazor/range-slider/how-to/customize-the-thumb.md index 42f09f4ba8..c7d0630f3d 100644 --- a/blazor/range-slider/how-to/customize-the-thumb.md +++ b/blazor/range-slider/how-to/customize-the-thumb.md @@ -9,7 +9,7 @@ documentation: ug # Customize the thumb in Blazor Range Slider Component -Slider appearance can be customized through CSS. By overriding the slider CSS classes, you can customize the thumb. By default, slider has unique class `e-handle` for slider thumb. You can override the following class as per your requirement. Here, in the sample, the slider thumb has been customized to square, circle, oval shapes, and background image has also been customized. +The slider’s appearance can be customized with CSS. By overriding the slider CSS classes, the thumb can be restyled. The slider thumb uses the `e-handle` class by default. Override this class to create different shapes or apply custom images. In the following example, the slider thumb is customized as square, circle, and oval shapes, and a background image is also applied. ```cshtml @using Syncfusion.Blazor.Inputs; @@ -115,4 +115,4 @@ Slider appearance can be customized through CSS. By overriding the slider CSS cl ``` -![Blazor Range Slider with Custom Thumb](./../images/blazor-rangeslider-custom-thumb.gif) \ No newline at end of file +![Blazor Range Slider with custom thumb](./../images/blazor-rangeslider-custom-thumb.gif) \ No newline at end of file diff --git a/blazor/range-slider/how-to/date-range-slider.md b/blazor/range-slider/how-to/date-range-slider.md index 58fea830d4..8c232b10c2 100644 --- a/blazor/range-slider/how-to/date-range-slider.md +++ b/blazor/range-slider/how-to/date-range-slider.md @@ -9,7 +9,7 @@ documentation: ug # Date Range Slider in Blazor Range Slider Component -The date formatting can be achieved using [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange) events. The process of date formatting is explained in the below sample. +This example demonstrates how to display dates in the Blazor Range Slider by formatting tick labels and tooltips. The date formatting is implemented using the [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange) events, as shown in the following sample. ```cshtml @using System.Globalization; @@ -45,4 +45,4 @@ The date formatting can be achieved using [`TicksRendering`](https://help.syncfu } ``` -![Blazor Range Slider with DateRange](../images/blazor-rangeslider-with-daterange.gif) \ No newline at end of file +![Blazor Range Slider with date-formatted ticks](../images/blazor-rangeslider-with-daterange.gif) \ No newline at end of file diff --git a/blazor/range-slider/how-to/numeric-range-slider.md b/blazor/range-slider/how-to/numeric-range-slider.md index 633681a619..d915a6360f 100644 --- a/blazor/range-slider/how-to/numeric-range-slider.md +++ b/blazor/range-slider/how-to/numeric-range-slider.md @@ -9,30 +9,34 @@ documentation: ug # Numeric Range Slider in Blazor Range Slider Component -The numeric values can be formatted into different decimal digits or fixed number of whole numbers or to represent the units. The Numeric processing is demonstrated below. +The Blazor Range Slider can display numeric values with custom formatting using the `Format` property on `SliderTicks` and `SliderTooltip`. Formatting options include appending units, controlling decimal precision, and adding leading zeros. The examples below demonstrate three common scenarios. -There are Numeric Range Sliders, which can be formatted in any way of your choice. In the examples found below, the first one demonstrates the visualization of ticks in km. +- Units: Append units such as “km” to tick labels and tooltips +- Decimal places: Control the number of decimal digits displayed +- Leading zeros: Pad values with zeros to a fixed width + +The first example formats values with a unit suffix (km). ```cshtml ``` -The second example showcases the use of decimal point in the Slider's ticks and tooltip placement. +The second example shows values with a specific decimal format. ```cshtml ``` -And in the third example, the formatting involves the placement of zeros before the required values. +The third example pads values with leading zeros to achieve a fixed width. ```cshtml ``` -The complete code for the above Numeric Range Slider can be found below. +The complete code for the numeric formatting examples is shown below. ```cshtml @using Syncfusion.Blazor.Inputs; diff --git a/blazor/range-slider/how-to/reversible-slider.md b/blazor/range-slider/how-to/reversible-slider.md index 9eaefc91e1..7d0357c689 100644 --- a/blazor/range-slider/how-to/reversible-slider.md +++ b/blazor/range-slider/how-to/reversible-slider.md @@ -9,7 +9,7 @@ documentation: ug # Reversible Slider in Blazor Range Slider Component -You can create a Range Slider rendered with values in reverse order by setting the [`Min`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Min) property to the maximum value and the [`Max`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Max) property to the minimum value. An example of how to achieve a Reversible Slider is shown below +Create a reversible slider (values displayed in descending order) by setting the [`Min`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Min) property to the maximum value and the [`Max`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Max) property to the minimum value. The example below renders a vertical range slider that counts down from 100 to 0.ow ```cshtml @using System.Globalization; @@ -40,4 +40,4 @@ You can create a Range Slider rendered with values in reverse order by setting t ![Blazor Reversible Slider](./../images/blazor-reversible-slider.gif) -N> Reversible order can be achieved with horizontal orientation Slider by setting [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_EnableRtl) as true. +N> For a horizontal slider, a reversed visual order can be achieved by enabling right-to-left layout with [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_EnableRtl) set to `true`. diff --git a/blazor/range-slider/how-to/slider-inside-dialog.md b/blazor/range-slider/how-to/slider-inside-dialog.md index b43a5839f6..1779586eed 100644 --- a/blazor/range-slider/how-to/slider-inside-dialog.md +++ b/blazor/range-slider/how-to/slider-inside-dialog.md @@ -7,9 +7,9 @@ control: Range Slider documentation: ug --- -# Render Blazor Range Slider Inside Dialog Popup +# Render the Blazor Range Slider Inside a Dialog Popup -The Blazor Slider component will be created before the Dialog popup is opened, and the Slider component will not be adapted to the parent element during dynamic rendering. As a result, the Slider does not render with the accurate initial value. To address this case, you must invoke the Slider's [RepositionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_RepositionAsync) method when the Dialog component is opened, utilizing the [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Opened) event. +When the dialog is initially hidden, the Blazor Range Slider may be initialized before layout information is available. As a result, the slider cannot size and position itself correctly, and the initial value may not render accurately. To resolve this, capture the slider instance using `@ref` and call the slider’s [RepositionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_RepositionAsync) method in the dialog’s [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Opened) event so the component recalculates its layout after the dialog is visible. ```cshtml diff --git a/blazor/range-slider/how-to/time-range-slider.md b/blazor/range-slider/how-to/time-range-slider.md index c117a93ce3..da0b2f6fd2 100644 --- a/blazor/range-slider/how-to/time-range-slider.md +++ b/blazor/range-slider/how-to/time-range-slider.md @@ -9,7 +9,7 @@ documentation: ug # Time Range Slider in Blazor Range Slider Component -The time formatting can be achieved same as the date formatting using [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange) events. +Time formatting for the Blazor Range Slider can be achieved in the same way as date formatting by using the [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange) events. ```cshtml @using Syncfusion.Blazor.Inputs @@ -58,4 +58,4 @@ The time formatting can be achieved same as the date formatting using [`TicksRen } ``` -![Blazor Range Slider with TimeRange](../images/blazor-rangeslider-with-timerange.gif) \ No newline at end of file +![Blazor Range Slider showing a time range](../images/blazor-rangeslider-with-timerange.gif) \ No newline at end of file diff --git a/blazor/range-slider/how-to/validate.md b/blazor/range-slider/how-to/validate.md index 9cdd0bf538..b300142ac9 100644 --- a/blazor/range-slider/how-to/validate.md +++ b/blazor/range-slider/how-to/validate.md @@ -9,9 +9,9 @@ documentation: ug # Validation of Slider in Blazor Range Slider Component -The Range Slider component can be validated using our FormValidator. The following steps walk-through slider validation. Render slider component inside a form, by giving the required styles. +The Range Slider component can be validated using Blazor’s built-in form validation with DataAnnotations. The steps below demonstrate how to place the slider inside an EditForm and display validation messages. -In Blazor Range Slider component, the DataAnnotation Validator is used here. +In the following examples, the DataAnnotationsValidator is used to validate slider values. ```csharp public class Annotation @@ -98,4 +98,4 @@ In Blazor Range Slider component, the DataAnnotation Validator is used here. ``` -![Validation in Blazor RangeSlider](./../images/blazor-rangeslider-validation.gif) \ No newline at end of file +![Validation in Blazor Range Slider](./../images/blazor-rangeslider-validation.gif) \ No newline at end of file diff --git a/blazor/range-slider/limits.md b/blazor/range-slider/limits.md index 8cc2fe1fc0..c22bfb0134 100644 --- a/blazor/range-slider/limits.md +++ b/blazor/range-slider/limits.md @@ -9,11 +9,11 @@ documentation: ug # Limits in Blazor Range Slider Component -The slider limits restrict the slider thumb between a particular range. This is used if higher or lower value affects the process or product where the slider is being used. +Slider limits restrict the movement of the slider thumb(s) within a specified range. This is useful when higher or lower values would negatively affect a process or product where the slider is used. -The following are the six options in the slider's limits object. Each API in the limits object is optional. +The following options are available in the slider’s limits object. Each API in the limits object is optional. -* [``Enabled``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_Enabled): Enables the limits in the Slider. +* [``Enabled``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_Enabled): Enables the limits in the slider. * [``MinStart``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_MinStart): Sets the minimum limit for the first handle. * [``MinEnd``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_MinEnd): Sets the maximum limit for the first handle. * [``MaxStart``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_MaxStart): Sets the minimum limit for the second handle. @@ -21,11 +21,11 @@ The following are the six options in the slider's limits object. Each API in the * [``StartHandleFixed``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_StartHandleFixed): Locks the first handle. * [``EndHandleFixed``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_EndHandleFixed): Locks the second handle. -## Default and MinRange Slider limits +## Default and MinRange slider limits -There is only one handle in the Default and MinRange Slider, so [``MinStart``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_MinStart), [``MinEnd``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_MinEnd), and [``StartHandleFixed``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_StartHandleFixed) options can be used. When the limits are enabled in the Slider, the limited area becomes darken. So you can differentiate the allowed and restricted area. +In Default and MinRange sliders, there is only one handle, so the [``MinStart``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_MinStart), [``MinEnd``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_MinEnd), and [``StartHandleFixed``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_StartHandleFixed) options are applicable. When limits are enabled, the restricted area is darkened, making it easy to distinguish allowed and disallowed regions. -Refer to the following snippet to enable the limits in the Slider. +Refer to the following snippet to enable limits in the slider. ```cshtml @using Syncfusion.Blazor.Inputs @@ -37,9 +37,9 @@ Refer to the following snippet to enable the limits in the Slider. ![Blazor Range Slider with Minimum Range Limits](images/blazor-rangeslider-min-range-limit.gif) -## Range Slider limits +## Range slider limits -In the Range Slider, both handles can be restricted and locked from the limit's object. In this sample, the first handle is limited between 10 and 40, and the second handle is limited between 60 and 90. +In the Range slider, both handles can be restricted and locked using the limits object. In this example, the first handle is limited between 10 and 40, and the second handle is limited between 60 and 90. ```cshtml @using Syncfusion.Blazor.Inputs @@ -57,7 +57,7 @@ In the Range Slider, both handles can be restricted and locked from the limit's ## Handle lock -The movement of slider handles can be locked by enabling the [``StartHandleFixed``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_StartHandleFixed) and [``EndHandleFixed``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_EndHandleFixed) properties in the limit's object. +The movement of slider handles can be locked by enabling the [``StartHandleFixed``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_StartHandleFixed) and [``EndHandleFixed``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_EndHandleFixed) properties in the limits object. ```cshtml @using Syncfusion.Blazor.Inputs diff --git a/blazor/range-slider/localization.md b/blazor/range-slider/localization.md index 8f1cadf7b5..26143c121e 100644 --- a/blazor/range-slider/localization.md +++ b/blazor/range-slider/localization.md @@ -9,4 +9,4 @@ documentation: ug # Localization in Blazor Range Slider Component -[Blazor Range Slider](https://www.syncfusion.com/blazor-components/blazor-range-slider) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. \ No newline at end of file +The [Blazor Range Slider](https://www.syncfusion.com/blazor-components/blazor-range-slider) component supports localization. Refer to the [Blazor localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. \ No newline at end of file diff --git a/blazor/range-slider/orientation.md b/blazor/range-slider/orientation.md index 6c8f118007..15019901cb 100644 --- a/blazor/range-slider/orientation.md +++ b/blazor/range-slider/orientation.md @@ -9,7 +9,7 @@ documentation: ug # Orientation in Blazor Range Slider Component -The Slider can be displayed, either in horizontal or vertical orientation by using [**Orientation**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_ShowButtons) property. By default, the Slider renders in horizontal orientation. +The slider can be displayed in either horizontal or vertical orientation using the [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Orientation) property. By default, the slider renders in a horizontal orientation. ```cshtml @using Syncfusion.Blazor.Inputs diff --git a/blazor/range-slider/style.md b/blazor/range-slider/style.md index 52bfee8366..e0d6e0ff8f 100644 --- a/blazor/range-slider/style.md +++ b/blazor/range-slider/style.md @@ -9,7 +9,7 @@ documentation: ug # CSS Structure in Blazor Range Slider Component -The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. +The following content outlines the CSS structure that can be used to modify the control’s appearance according to application requirements. ## Customizing the slider track diff --git a/blazor/range-slider/ticks.md b/blazor/range-slider/ticks.md index bc4730d8d8..fa8939177f 100644 --- a/blazor/range-slider/ticks.md +++ b/blazor/range-slider/ticks.md @@ -9,7 +9,7 @@ documentation: ug # Ticks in Blazor Range Slider Component -The Ticks in Slider supports to easily identify the current value/values of the Slider. It contains [`SmallStep`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_SmallStep) and [`LargeStep`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_LargeStep). The value of the major ticks alone will be displayed in the slider. In order to enable/disable the small ticks, use the [`ShowSmallTicks`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_ShowSmallTicks) property. +Ticks in the slider help users quickly identify the current value or range. Configure tick intervals using [`SmallStep`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_SmallStep) and [`LargeStep`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_LargeStep). By default, only major (large) tick labels are displayed. Use the [`ShowSmallTicks`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_ShowSmallTicks) property to show or hide minor ticks. ```cshtml @using Syncfusion.Blazor.Inputs @@ -28,7 +28,7 @@ The Ticks in Slider supports to easily identify the current value/values of the ## Step -When the Slider is moved, it increases/decreases the value based on the step value. By default, the value is increased/decreased by 1. Use the [`Step`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Step) property to change the increment step value. +When the slider moves, its value increases or decreases by the step amount. By default, the step is 1. Use the [`Step`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Step) property to change the increment. ```cshtml @using Syncfusion.Blazor.Inputs @@ -46,7 +46,7 @@ When the Slider is moved, it increases/decreases the value based on the step val ## Min and Max -Enables the minimum/starting and maximum/ending value of the Slider, by using the [`Min`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Min) and [`Max`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Max) property. By default, the minimum value is 1 and maximum value is 100. In the following sample the slider is rendered with the min value as 100 and max value as 1100. +Set the minimum (start) and maximum (end) values using the [`Min`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Min) and [`Max`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Max) properties. By default, the slider range is 1 to 100. The following example configures a range from 100 to 1100. ```cshtml @using Syncfusion.Blazor.Inputs @@ -87,4 +87,4 @@ The [ValueChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Input } } -``` +``` \ No newline at end of file diff --git a/blazor/range-slider/tooltip.md b/blazor/range-slider/tooltip.md index 34a5f69803..a28a4de116 100644 --- a/blazor/range-slider/tooltip.md +++ b/blazor/range-slider/tooltip.md @@ -9,7 +9,7 @@ documentation: ug # Tooltip in Blazor Range Slider Component -The Slider displays the tooltip to indicate the current value by clicking the Slider bar or drag the Slider handle. The Tooltip position can be customized by using the [`Placement`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTooltip.html#Syncfusion_Blazor_Inputs_SliderTooltip_Placement) property. Also decides the tooltip display mode on a page, i.e., on hovering, focusing, or clicking on the Slider handle and it always remains/displays on the page. +The slider can display a tooltip that shows the current value when interacting with the control. Configure the tooltip position using the [`Placement`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTooltip.html#Syncfusion_Blazor_Inputs_SliderTooltip_Placement) property. Also decides the tooltip display mode on a page, i.e., on hovering, focusing, or clicking on the Slider handle and it always remains/displays on the page. ```cshtml @using Syncfusion.Blazor.Inputs @@ -23,13 +23,13 @@ The Slider displays the tooltip to indicate the current value by clicking the Sl } ``` -![Blazor Range Slider displays Tooltip](images/blazor-rangeslider-tooltip.png) +![Blazor Range Slider displaying a tooltip](images/blazor-rangeslider-tooltip.png) ## Buttons -The Slider value can be changed by using the [**ShowButtons**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_ShowButtons) property which can be used to Increase and Decrease the values. In Range Slider, by default the first handle value will be changed while clicking the button. Change the handle focus and press the button to change the last focused handle value. +Change the slider value using the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_ShowButtons) property, which renders increment and decrement buttons. In a range slider, button clicks change the first handle by default. To change the other handle, move focus to it and then use the buttons. -N> After enabling the slider buttons if the 'Tab' key is pressed, the focus goes to the handle and not to the button. +N> After enabling slider buttons, pressing the Tab key moves focus to the handle, not the buttons. ```cshtml @using Syncfusion.Blazor.Inputs @@ -43,4 +43,4 @@ N> After enabling the slider buttons if the 'Tab' key is pressed, the focus goes } ``` -![Blazor Range Slider with Buttons](images/blazor-rangeslider-buttons.png) \ No newline at end of file +![Blazor Range Slider with buttons](images/blazor-rangeslider-buttons.png) \ No newline at end of file diff --git a/blazor/range-slider/types.md b/blazor/range-slider/types.md index 8d794370c3..9c17361685 100644 --- a/blazor/range-slider/types.md +++ b/blazor/range-slider/types.md @@ -9,16 +9,15 @@ documentation: ug # Types in Blazor Range Slider Component -The [**Type**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Type) of Slider are as follows: +The [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Type) options for the slider are: | **Types** | **Usage** | | --- | --- | -| Default | Allows to select a single value in the Slider. | -| MinRange | Allows to select a single value in the Slider. Its display’s a shadow from the start to the current value. | -| Range | Allows to select a range of values in the Slider. It displays shadow in-between the selection range. | +| Default | Selects a single value. | +| MinRange | Selects a single value and displays a filled selection from the start to the current value. | +| Range | Selects a range of values using two handles and displays a filled selection between them. | -N> Both the Default Slider and Min-Range Slider have same behavior that is used to select a single value. -In Min-Range Slider, a shadow is considered from the start value to current handle position. But the Range Slider contains two handles that is used to select a range of values and a shadow is considered in between the two handles. +N> Default and MinRange both select a single value. MinRange visually fills the track from the start value to the current handle position. Range uses two handles to select a span of values and fills the area between them. ```cshtml @using Syncfusion.Blazor.Inputs @@ -38,4 +37,4 @@ In Min-Range Slider, a shadow is considered from the start value to current hand } ``` -![Displaying Different Blazor RangeSliders](images/blazor-rangeslider-types.png) +![Displaying different Blazor Range Sliders](images/blazor-rangeslider-types.png) \ No newline at end of file From c74e1723fb4f46c47d7049ef3897a77a5960b350 Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Mon, 13 Oct 2025 13:30:48 +0530 Subject: [PATCH 4/5] 983104: Updated --- blazor/range-slider/how-to/slider-inside-dialog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/range-slider/how-to/slider-inside-dialog.md b/blazor/range-slider/how-to/slider-inside-dialog.md index 1779586eed..f12ece8711 100644 --- a/blazor/range-slider/how-to/slider-inside-dialog.md +++ b/blazor/range-slider/how-to/slider-inside-dialog.md @@ -1,6 +1,6 @@ --- layout: post -title: Range Slider inside Dialog popup in Blazor Range Slider Component | Syncfusion +title: Range Slider inside Dialog in Blazor Range Slider Component | Syncfusion description: Checkout and learn here all about Slider inside Dialog popup in Syncfusion Blazor Range Slider component and more. platform: Blazor control: Range Slider From 46bda432b41dc5e7d28dbb4b355ea1b5340f3930 Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Mon, 13 Oct 2025 14:10:44 +0530 Subject: [PATCH 5/5] Update slider-inside-dialog.md --- blazor/range-slider/how-to/slider-inside-dialog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/range-slider/how-to/slider-inside-dialog.md b/blazor/range-slider/how-to/slider-inside-dialog.md index f12ece8711..13bacc9a1a 100644 --- a/blazor/range-slider/how-to/slider-inside-dialog.md +++ b/blazor/range-slider/how-to/slider-inside-dialog.md @@ -1,6 +1,6 @@ --- layout: post -title: Range Slider inside Dialog in Blazor Range Slider Component | Syncfusion +title: Range Slider inside Dialog in Blazor Range Slider | Syncfusion description: Checkout and learn here all about Slider inside Dialog popup in Syncfusion Blazor Range Slider component and more. platform: Blazor control: Range Slider