From 61772ec8cebeb1caf15a5c935653cd47551b82bd Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Tue, 14 Oct 2025 08:39:27 +0530 Subject: [PATCH] 983104: Updated the UG Documentation for Colorpicker --- blazor/color-picker/accessibility.md | 28 ++++++------- blazor/color-picker/events.md | 22 +++++----- .../getting-started-with-web-app.md | 33 ++++++++------- blazor/color-picker/getting-started.md | 41 +++++++++---------- .../how-to/customize-color-picker.md | 14 +++---- .../how-to/disable-color-picker.md | 6 +-- .../how-to/hide-control-buttons.md | 4 +- .../color-picker/how-to/no-color-support.md | 12 +++--- .../how-to/render-palette-alone.md | 8 ++-- .../color-picker/how-to/show-recent-color.md | 8 ++-- blazor/color-picker/inline-rendering.md | 8 ++-- blazor/color-picker/localization.md | 21 +++++----- blazor/color-picker/mode-and-value.md | 12 +++--- blazor/color-picker/style-and-appearance.md | 2 +- 14 files changed, 108 insertions(+), 111 deletions(-) diff --git a/blazor/color-picker/accessibility.md b/blazor/color-picker/accessibility.md index deda7494bc..04c8e69192 100644 --- a/blazor/color-picker/accessibility.md +++ b/blazor/color-picker/accessibility.md @@ -9,7 +9,7 @@ documentation: ug # Accessibility in Blazor Color Picker Component -The Blazor Color Picker 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 Color Picker 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 Color Picker component is outlined below. @@ -39,21 +39,21 @@ The accessibility compliance for the Blazor Color Picker component is outlined b ## WAI-ARIA attributes -The Blazor Color Picker component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor ColorPicker component: +The Blazor Color Picker component follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/) practices to support assistive technologies. The following ARIA attributes are used in the Blazor Color Picker component: | Attributes | Purpose | | --- | --- | -| `role` | Indicates the Color Picker component as `color`and the tiles as `gridcell` in the color palette. | -| `aria-label` | Indicates the accessible name for the tiles. | -| `aria-selected` | Indicates the current selected state of the tile. | -| `aria-haspopup` | Indicates the availability of the popup element. | -| `aria-expanded` | Indicates whether the popup can be expanded or collapsed, as well as indicates whether its current state is expanded or collapsed. | -| `aria-owns` | Identifies an elements in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. | -| `aria-disabled` | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. | +| `role` | Identifies interactive elements (for example, `grid` for the palette and `gridcell` for tiles) to convey structure to assistive technologies. | +| `aria-label` | Provides accessible names for interactive elements such as tiles and buttons. | +| `aria-selected` | Indicates the current selection state of a tile in the palette. | +| `aria-haspopup` | Indicates the availability of the popup element when applicable. | +| `aria-expanded` | Indicates whether the popup is currently expanded or collapsed. | +| `aria-owns` | Establishes relationships between popup and trigger elements when DOM hierarchy alone is insufficient. | +| `aria-disabled` | Conveys that the element is disabled and not operable. | ## Keyboard interaction -The Blazor Color Picker component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#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 ColorPicker component. +The Blazor Color Picker component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor ColorPicker component. | Windows | Mac | Actions | | --- | --- | --- | @@ -61,14 +61,14 @@ The Blazor Color Picker component followed the [keyboard interaction](https://ww | ↓ | ↓ | Moves the handler/tile down from the current position. | | ← | ← | Moves the handler/tile left from the current position. | | → | → | Moves the handler/tile right from the current position. | -| Enter | Enter | Apply the selected color value. | -| Tab | Tab | To focus the next focusable element in the ColorPicker popup. | +| Enter | Enter | Applies the selected color value. | +| Tab | Tab | Moves focus to the next focusable element in the Color Picker popup. | ## Ensuring accessibility -The Blazor Color Picker component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Blazor Color Picker component's accessibility levels are validated with [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) using Playwright-based tests. -The accessibility compliance of the Blazor Color Picker component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/color-picker) in a new window to evaluate the accessibility of the Color Picker Blazor component with accessibility tools. +The accessibility compliance of the Blazor Color Picker component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/color-picker) in a new window to evaluate the component with accessibility tools. {% previewsample "https://ej2.syncfusion.com/accessibility/color-picker.html" %} diff --git a/blazor/color-picker/events.md b/blazor/color-picker/events.md index f36921078f..2fa75cc280 100644 --- a/blazor/color-picker/events.md +++ b/blazor/color-picker/events.md @@ -7,13 +7,13 @@ control: Colorpicker documentation: ug --- -# Events in Blazor ColorPicker Component +# Events in Blazor Color Picker Component -This section explains the list of events of the Colorpicker component which will be triggered for appropriate Colorpicker actions. +This section lists the events in the Color Picker component and when they are triggered during user interaction. ## Closed -`Closed` event triggers after the popup has been closed. +`Closed` triggers after the popup has been closed. ```cshtml @using Syncfusion.Blazor.Inputs @@ -31,7 +31,7 @@ This section explains the list of events of the Colorpicker component which will ## Opened -`Opened` event triggers when the popup Open. +`Opened` triggers when the popup Open. ```cshtml @using Syncfusion.Blazor.Inputs @@ -49,7 +49,7 @@ This section explains the list of events of the Colorpicker component which will ## OnClose -`OnClose` event triggers before the popup closed. +`OnClose` triggers before the popup closed. ```cshtml @using Syncfusion.Blazor.Inputs @@ -67,7 +67,7 @@ This section explains the list of events of the Colorpicker component which will ## OnOpen -`OnOpen` event triggers when the popup is Opened. +`OnOpen` triggers when the popup is Opened. ```cshtml @using Syncfusion.Blazor.Inputs @@ -85,7 +85,7 @@ This section explains the list of events of the Colorpicker component which will ## ValueChange -`ValueChange` event triggers when changing the colors. +`ValueChange` triggers when changing the colors. ```cshtml @using Syncfusion.Blazor.Inputs @@ -103,7 +103,7 @@ This section explains the list of events of the Colorpicker component which will ## Created -`Created` event triggers when the component is created. +`Created` triggers when the component is created. ```cshtml @using Syncfusion.Blazor.Inputs @@ -121,7 +121,7 @@ This section explains the list of events of the Colorpicker component which will ## OnModeSwitch -`OnModeSwitch` event triggered before the mode switching is performed in the component. +`OnModeSwitch` triggers before the mode is switched in the component. ```cshtml @using Syncfusion.Blazor.Inputs @@ -139,7 +139,7 @@ This section explains the list of events of the Colorpicker component which will ## ModeSwitched -`ModeSwitched` event triggered after the mode switching is performed in the component. +`ModeSwitched` triggers after the mode switching is completed. ```cshtml @using Syncfusion.Blazor.Inputs @@ -157,7 +157,7 @@ This section explains the list of events of the Colorpicker component which will ## OnTileRender -`OnTileRender` event triggered after the rendering of each color tile in the component is completed. +`OnTileRender` triggers after rendering of each color tile is completed. ```cshtml @using Syncfusion.Blazor.Inputs diff --git a/blazor/color-picker/getting-started-with-web-app.md b/blazor/color-picker/getting-started-with-web-app.md index 069722a935..baf922d195 100644 --- a/blazor/color-picker/getting-started-with-web-app.md +++ b/blazor/color-picker/getting-started-with-web-app.md @@ -3,13 +3,13 @@ layout: post title: Getting Started with Syncfusion Blazor ColorPicker Component in WebApp description: Checkout and learn about the documentation for getting started with Blazor ColorPicker Component in Blazor Web App. platform: Blazor -component: ColorPicker +control: Color Picker documentation: ug --- # Getting Started with Blazor ColorPicker Component in Web App -This section briefly explains about how to include [Blazor ColorPicker](https://www.syncfusion.com/blazor-components/blazor-color-picker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to include the [Blazor ColorPicker](https://www.syncfusion.com/blazor-components/blazor-color-picker) component in 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 ColorPicker](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&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the 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=vs) when creating the Blazor Web App. ## Install Syncfusion® Blazor Inputs and Themes NuGet in the Blazor Web App -To add **Blazor ColorPicker** 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 ColorPicker** 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 Syncfusion® Blazor component NuGet packages in the Client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, run 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,9 +54,9 @@ 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. @@ -74,11 +74,11 @@ N> For more information on creating a **Blazor Web App** with various interactiv ## 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 Syncfusion® Blazor component 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 at 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 %} @@ -103,7 +103,7 @@ 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.| +| Server | Open **~/_Imports.razor** file, which is located in the `Components` folder.| Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. @@ -231,5 +231,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- 1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) - +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file diff --git a/blazor/color-picker/getting-started.md b/blazor/color-picker/getting-started.md index 43219e0581..ead1c246e2 100644 --- a/blazor/color-picker/getting-started.md +++ b/blazor/color-picker/getting-started.md @@ -3,15 +3,15 @@ layout: post title: Getting Started with Blazor ColorPicker Component | Syncfusion description: Checkout and learn about getting started with Blazor ColorPicker component in and Blazor WebAssembly Application. platform: Blazor -control: ColorPicker +control: Color Picker documentation: ug --- # Getting Started with Blazor ColorPicker Component -This section briefly explains about how to include [Blazor ColorPicker](https://www.syncfusion.com/blazor-components/blazor-color-picker) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to add the [Blazor Color Picker](https://www.syncfusion.com/blazor-components/blazor-color-picker) component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code. -To get started quickly with ColorPicker Component using Blazor, you can check out this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ColorPicker) sample: +To get started quickly with the Color Picker in Blazor, watch the following video or explore the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ColorPicker): {% youtube "youtube:https://www.youtube.com/watch?v=lI_5h-ZUSHw"%} @@ -26,11 +26,11 @@ To get started quickly with ColorPicker Component using Blazor, you can check ou ## 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-7.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 ColorPicker** 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 Color Picker** component, open 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, 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 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 app using the following commands in the integrated terminal(Ctrl+`). {% tabs %} @@ -71,9 +71,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 the terminal is 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 %} {% highlight c# tabtitle="Package Manager" %} @@ -86,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 %} @@ -94,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** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -105,7 +104,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 the Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -138,11 +137,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 the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for different 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)) to reference themes. Also see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) for guidance on adding script references in a Blazor application. ## Add Blazor ColorPicker component -Add the Syncfusion® Blazor ColorPicker component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Color Picker component to the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor %} @@ -152,12 +151,12 @@ Add the Syncfusion® Blazor ColorPicker comp {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ColorPicker component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Color Picker component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrztMhkhMtJdbVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker Component](./images/blazor-colorpicker-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrztMhkhMtJdbVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Color Picker component](./images/blazor-colorpicker-component.png)" %} ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-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 client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting started with Syncfusion® Blazor for server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +* [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/color-picker/how-to/customize-color-picker.md b/blazor/color-picker/how-to/customize-color-picker.md index 9388d4c41e..df39dae254 100644 --- a/blazor/color-picker/how-to/customize-color-picker.md +++ b/blazor/color-picker/how-to/customize-color-picker.md @@ -11,7 +11,7 @@ documentation: ug ## Custom palette -By default, the Palette will be rendered with default colors. To load custom colors in the palette, specify the colors in the [PresetColors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_PresetColors) property. To customize the color palette, add a custom class to palette tiles using [OnTileRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_OnTileRender) event. +By default, the palette renders with a set of predefined colors. To load custom colors, set the [PresetColors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_PresetColors) property. To further customize palette tiles (for example, to add a class for styling), use the [OnTileRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_OnTileRender) event. ```cshtml @@ -78,13 +78,13 @@ By default, the Palette will be rendered with default colors. To load custom col ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BDrKsLhcASTCtgHM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor ColorPicker with Custom Palette](./../images/blazor-colorpicker-with-custom-palette.png) +![Blazor Color Picker with custom palette](./../images/blazor-colorpicker-with-custom-palette.png) ## Hide input area from picker -By default, the input area will be rendered in Color Picker. To hide the input area from it, add `e-hide-value` class to Color Picker using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_CssClass) property. +By default, the input area is rendered in the Color Picker. To hide the input area, add the built-in class `e-hide-value` via the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_CssClass) property. This hides the input field visually while retaining core picker functionality. -In the following sample, the Color Picker is rendered without input area. +In the following sample, the Color Picker is rendered without the input area. ```cshtml @using Syncfusion.Blazor.Inputs @@ -94,11 +94,11 @@ In the following sample, the Color Picker is rendered without input area. ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LXhKMLLwqoJqULKi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Hide Input Area in Blazor ColorPicker](./../images/blazor-colorpicker-hide-input.png) +![Hide input area in Blazor Color Picker](./../images/blazor-colorpicker-hide-input.png) ## Custom handle -Color Picker handle shape and UI can be customized. Here, we have customized the handle as svg icon. Similarly, you can customize the handle based on your requirement. +Customize the Color Picker handle shape and UI with CSS. In this example, the handle is replaced with an SVG icon encoded as a data URL. Similar techniques can be used to style the handle to match application branding. For broad compatibility, verify styles across themes and consider contrast and focus visibility. The following sample shows the customized Color Picker handle. @@ -128,4 +128,4 @@ The following sample shows the customized Color Picker handle. ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hjhKWrLGKyTIhQGO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Customizing Blazor ColorPicker Handle Shape](./../images/blazor-colorpicker-handle-customization.png) \ No newline at end of file +![Customize Blazor Color Picker handle shape](./../images/blazor-colorpicker-handle-customization.png) \ No newline at end of file diff --git a/blazor/color-picker/how-to/disable-color-picker.md b/blazor/color-picker/how-to/disable-color-picker.md index c582a73b22..76d6baa212 100644 --- a/blazor/color-picker/how-to/disable-color-picker.md +++ b/blazor/color-picker/how-to/disable-color-picker.md @@ -9,9 +9,9 @@ documentation: ug # Disable Color Picker in Blazor Color Picker Component -To achieve disabled state in Color Picker, set the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Disabled) property to `true`. The Color Picker pop-up cannot be accessed in disabled state. +Set the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Disabled) property to `true` to disable the Color Picker. In the disabled state, the input and popup cannot receive focus or user interaction. -The following example shows the `Disabled` state of Color Picker component. +The following example shows the `Disabled` state of the Color Picker component. ```cshtml @using Syncfusion.Blazor.Inputs @@ -21,4 +21,4 @@ The following example shows the `Disabled` state of Color Picker component. ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/htLKsLrGgeJFrvZn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Disable State in Blazor ColorPicker](./../images/blazor-colorpicker-disable-state.png) \ No newline at end of file +![Disable state in Blazor Color Picker](./../images/blazor-colorpicker-disable-state.png) \ No newline at end of file diff --git a/blazor/color-picker/how-to/hide-control-buttons.md b/blazor/color-picker/how-to/hide-control-buttons.md index 6551caf8aa..7177496e30 100644 --- a/blazor/color-picker/how-to/hide-control-buttons.md +++ b/blazor/color-picker/how-to/hide-control-buttons.md @@ -9,7 +9,7 @@ documentation: ug # Hide control buttons in Blazor Color Picker Component -Color Picker can be rendered without control buttons (Apply/Cancel). In this case, while selecting a color, the Color Picker pop-up is closed and selected color can be applied directly. To hide control buttons, set the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons) property to `false`. +Render the Color Picker without control buttons (Apply/Cancel) by setting the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons) property to `false`. ```cshtml @using Syncfusion.Blazor.Inputs @@ -19,4 +19,4 @@ Color Picker can be rendered without control buttons (Apply/Cancel). In this cas ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hDhAWLBcqoIBqnae?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Hide Control Buttons in Blazor ColorPicker](./../images/blazor-colorpicker-hide-control.png) \ No newline at end of file +![Hide control buttons in Blazor Color Picker](./../images/blazor-colorpicker-hide-control.png) \ No newline at end of file diff --git a/blazor/color-picker/how-to/no-color-support.md b/blazor/color-picker/how-to/no-color-support.md index 045bfe7b00..65ad45eef7 100644 --- a/blazor/color-picker/how-to/no-color-support.md +++ b/blazor/color-picker/how-to/no-color-support.md @@ -9,11 +9,11 @@ documentation: ug # Handle No Color Support in Blazor Color Picker Component -The Color Picker component supports no color functionality. By clicking the no color tile from palette, the selected color becomes `empty` and considered as no color has been selected from Color Picker. +The Color Picker supports a no color option. When the No color tile in the palette is selected, the chosen color is cleared (treated as no color/empty). ## Default no color -To achieve this, set [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_NoColor) property as true. In the following sample, the first tile of the color palette represents the no color tile. By clicking the no color tile, you can achieve the above functionalities. +Enable the built-in no color tile by setting the [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_NoColor) property to `true`. In the following example, the first palette tile is the No color tile. Selecting it clears the selection and applies no color. ```cshtml @@ -42,13 +42,13 @@ To achieve this, set [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion. ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VDVUsLLGKoIFoxSv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor ColorPicker with Default No Color](./../images/blazor-colorpicker-nocolor.png) +![Blazor Color Picker with default no color](./../images/blazor-colorpicker-nocolor.png) ->If the [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_NoColor) property is enabled, make sure to disable the [ModeSwitcher](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ModeSwitcher) property. +> If the [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_NoColor) property is enabled, make sure to disable the [ModeSwitcher](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ModeSwitcher) property. ## Custom no color -The following sample shows the color palette with custom no color option. +The following example demonstrates a custom no color option alongside a palette rendered inside a SplitButton. Selecting No color applies a transparent background. ```cshtml @@ -132,4 +132,4 @@ The following sample shows the color palette with custom no color option. ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VthAsLLwAyxsVKHl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor ColorPicker with Custom No Color](./../images/blazor-colorpicker-custom-nocolor.png) +![Blazor Color Picker with custom no color](./../images/blazor-colorpicker-custom-nocolor.png) \ No newline at end of file diff --git a/blazor/color-picker/how-to/render-palette-alone.md b/blazor/color-picker/how-to/render-palette-alone.md index cdf7b06096..847ddb17f6 100644 --- a/blazor/color-picker/how-to/render-palette-alone.md +++ b/blazor/color-picker/how-to/render-palette-alone.md @@ -9,9 +9,9 @@ documentation: ug # Render palette alone in Blazor Color Picker Component -To render the `Palette` alone in Color Picker, specify the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property as `Palette`, and set the [ModeSwitcher](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ModeSwitcher) property to `false`. +Render only the palette in the Color Picker by setting the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property to `Palette` and disabling the [ModeSwitcher](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ModeSwitcher) to prevent switching to the picker view. -In the following sample, the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons) property is set to `false` to hide the control buttons and it renders only the `Palette` area. +In the following sample, the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons) property is set to `false` to hide the control buttons, so only the palette area is displayed and color selection applies immediately. ```cshtml @using Syncfusion.Blazor.Inputs @@ -21,6 +21,6 @@ In the following sample, the [ShowButtons](https://help.syncfusion.com/cr/blazor ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Rendering Palette Alone in Blazor ColorPicker](./../images/blazor-colorpicker-with-palette-alone.png) +![Render palette alone in Blazor Color Picker](./../images/blazor-colorpicker-with-palette-alone.png) -N> To render `Picker` alone, specify the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property as 'Picker'. +N> To display the palette embedded in the page instead of in a popup, set `Inline="true"`. To render `Picker` alone, specify the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property as 'Picker'. \ No newline at end of file diff --git a/blazor/color-picker/how-to/show-recent-color.md b/blazor/color-picker/how-to/show-recent-color.md index 37e53eff28..6a94a67533 100644 --- a/blazor/color-picker/how-to/show-recent-color.md +++ b/blazor/color-picker/how-to/show-recent-color.md @@ -9,11 +9,11 @@ documentation: ug # Show Recent color in Blazor Color Picker Component -The [`ShowRecentColors`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowRecentColors) property enables the display of recently selected colors in the ColorPicker when in palette mode. This feature helps users quickly access their most frequently used colors. +The [ShowRecentColors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowRecentColors) property displays recently selected colors in the Color Picker when using palette mode. This feature helps users quickly reuse frequently chosen colors. ->Note: The [`ShowRecentColors`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowRecentColors) feature displays up to 10 recent colors as tiles and is available only in `palette` mode. +> Note: The [ShowRecentColors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowRecentColors) feature shows up to 10 recent colors as tiles and is available only in palette mode. -In the following sample, the [`ShowRecentColors`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowRecentColors) property is enabled to display recent colors in the `palette` area. +In the following sample, the [ShowRecentColors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowRecentColors) property is enabled to display recent colors in the palette area. ```cshtml @using Syncfusion.Blazor.Inputs @@ -23,4 +23,4 @@ In the following sample, the [`ShowRecentColors`](https://help.syncfusion.com/cr ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Rendering Show Recent color in Blazor ColorPicker](./../images/blazor-colorpicker-show-recent-color.png) \ No newline at end of file +![Show recent colors in Blazor Color Picker](./../images/blazor-colorpicker-show-recent-color.png) \ No newline at end of file diff --git a/blazor/color-picker/inline-rendering.md b/blazor/color-picker/inline-rendering.md index 3b47afdca5..e53cd0c0e7 100644 --- a/blazor/color-picker/inline-rendering.md +++ b/blazor/color-picker/inline-rendering.md @@ -9,9 +9,9 @@ documentation: ug # Inline Rendering in Blazor Color Picker Component -By default, the ColorPicker will be rendered using SplitButton and open the pop-up to access the ColorPicker. To render the ColorPicker container alone and to access it directly, render it as inline. It can be achieved by setting the [Inline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Inline) property to `true`. +By default, the Color Picker renders with a button that opens a popup to access the selector. To display the Color Picker directly on the page (without a popup), render it inline by setting the [Inline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Inline) property to `true`. -The following sample shows the inline type rendering of ColorPicker. +The following sample shows inline rendering of the Color Picker. ```cshtml @using Syncfusion.Blazor.Inputs @@ -22,6 +22,6 @@ The following sample shows the inline type rendering of ColorPicker. {% previewsample "https://blazorplayground.syncfusion.com/embed/hNVKsVrQgIVKJnGz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Inline Rendering in Blazor ColorPicker](./images/blazor-colorpicker-inline-rendering.png) +![Inline rendering in Blazor Color Picker](./images/blazor-colorpicker-inline-rendering.png) -N> The `ShowButtons` property is disabled in this sample because the control buttons are not needed for inline type. To know about the control buttons functionality, refer to the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons). +N> The `ShowButtons` property is disabled in this sample because control buttons are not needed for inline rendering. For details about control buttons functionality, see [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons). \ No newline at end of file diff --git a/blazor/color-picker/localization.md b/blazor/color-picker/localization.md index adfc4f3824..87b3e633b4 100644 --- a/blazor/color-picker/localization.md +++ b/blazor/color-picker/localization.md @@ -7,19 +7,18 @@ control: Color Picker documentation: ug --- - # Localization and RTL in Blazor Color Picker Component ## Localization -The `Localization` library allows you to localize default text content of the Color Picker. The Color Picker component has static text for control buttons (apply / cancel) and mode switcher that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the locale value and translation object. You can refer [How to enable Localization in Blazor application](https://blazor.syncfusion.com/documentation/common/localization#how-to-enable-localization-in-blazor-application) page for the introduction and configuring the localization. +Use the localization framework to translate the default text in the Color Picker. The component includes static text for control buttons (Apply/Cancel) and the mode switcher that can be localized for cultures such as Arabic, German, French, and more by setting the app’s locale and providing translated resources. For setup guidance, see [How to enable localization in a Blazor application](https://blazor.syncfusion.com/documentation/common/localization#how-to-enable-localization-in-blazor-application). -You can modify the default value in `.res` file added to Resource folder. Enter the key value (Locale Keywords) in the `Name` column and the translated string in the `Value` column. The following list of keys and their values are used in the Color Picker. +Modify the default value in `.res` file added to Resource folder. Enter the key value (Locale Keywords) in the `Name` column and the translated string in the `Value` column. The following list of keys and their values are used in the Color Picker. -| **Locale key** | **en-US (default culture)** | **de (Deutsch culture)** | -| ------------ | ----------------------- | --------------------| -| `ColorPicker_Apply` | `Apply` | `Anwenden` | -| `ColorPicker_Cancel` | `Cancel` | `Abbrechen` | +| Locale key | en-US (default culture) | de (Deutsch culture) | +| ---------- | ------------------------ | -------------------- | +| `ColorPicker_Apply` | `Apply` | `Anwenden` | +| `ColorPicker_Cancel` | `Cancel` | `Abbrechen` | | `ColorPicker_ModeSwitcher` | `Switch Mode` | `Modus wechseln` | ```cshtml @@ -31,13 +30,13 @@ You can modify the default value in `.res` file added to Resource folder. Enter ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LZhKsVVwqSUTjofI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Localization in Blazor ColorPicker](./images/blazor-colorpicker-localization.png) +![Localization in Blazor Color Picker](./images/blazor-colorpicker-localization.png) ## RTL -Color Picker component has `RTL` support. It helps to render the Color Picker from right-to-left direction. It improves the user experiences and accessibility for users who use right-to-left languages(Arabic, Farsi, Urdu, etc). This can be achieved by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_EnableRtl) property to true. +The Color Picker supports right-to-left (RTL) layout to improve usability for languages such as Arabic, Farsi, and Urdu. Enable RTL by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_EnableRtl) property to `true`. RTL affects layout direction but does not translate text; use localization to provide translated strings. -In the following example, Color Picker component is rendered in RTL mode with `arabic` locale. +In the following example, the Color Picker is rendered in RTL mode with an Arabic locale configured at the app level. ```cshtml @@ -48,4 +47,4 @@ In the following example, Color Picker component is rendered in RTL mode with `a ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LZBUsrLmqSKnHwGP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Right to Left in Blazor ColorPicker](./images/blazor-colorpicker-right-to-left.png) \ No newline at end of file +![Right to left in Blazor Color Picker](./images/blazor-colorpicker-right-to-left.png) \ No newline at end of file diff --git a/blazor/color-picker/mode-and-value.md b/blazor/color-picker/mode-and-value.md index 0a3c389f66..04403c67bb 100644 --- a/blazor/color-picker/mode-and-value.md +++ b/blazor/color-picker/mode-and-value.md @@ -11,9 +11,9 @@ documentation: ug ## Rendering palette at initial load -By default, the `Picker` area will be rendered at initial load. To render the Palette area while opening the Color Picker pop-up, specify the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property as `Palette`. +By default, the `Picker` view is shown initially. To display the palette view when opening the Color Picker popup, set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property to `Palette`. -In the following sample, it will render the `Palette` at initial load. +In the following example, the palette is displayed at initial load. ```cshtml @using Syncfusion.Blazor.Inputs @@ -24,13 +24,13 @@ In the following sample, it will render the `Palette` at initial load. {% previewsample "https://blazorplayground.syncfusion.com/embed/VZhgshBQKIhHYIMT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor ColorPicker with Palette](./images/blazor-colorpicker-with-palette.png) +![Blazor Color Picker with palette](./images/blazor-colorpicker-with-palette.png) ## Color value The [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Value) property can be used to specify the color value to the Color Picker. It supports either `three` or `six` digit hex codes. To include `opacity`, set the color value as `four` or `eight` digit hex code. -In the following sample, the color value is set as `four` digit hex code, the last digit represents the `opacity` value. +In the following example, a 4-digit hex value is used, where the last digit represents the opacity. ```cshtml @using Syncfusion.Blazor.Inputs @@ -41,6 +41,6 @@ In the following sample, the color value is set as `four` digit hex code, the la {% previewsample "https://blazorplayground.syncfusion.com/embed/VjVUCBBQUeLkCZYv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Changing Blazor ColorPicker value](./images/blazor-colorpicker-value.png) +![Changing Blazor Color Picker value](./images/blazor-colorpicker-value.png) -N> The [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Value) property supports hex code with or without `#` prefix. +N> The [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Value) property supports hex codes with or without the `#` prefix. \ No newline at end of file diff --git a/blazor/color-picker/style-and-appearance.md b/blazor/color-picker/style-and-appearance.md index a0e44c8649..447e5f95ef 100644 --- a/blazor/color-picker/style-and-appearance.md +++ b/blazor/color-picker/style-and-appearance.md @@ -9,7 +9,7 @@ documentation: ug # Styles and Appearances in Blazor Color Picker Component -To modify the ColorPicker appearance, you need to override the default CSS of ColorPicker component. Find the list of CSS classes and its corresponding section in ColorPicker component. Also, you have an option to create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material). +Customize the Color Picker appearance by overriding its default CSS. The following table lists key CSS classes and the corresponding UI sections in the Color Picker. For broader, theme-level changes, create a custom theme using [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material). |CSS Class | Purpose of Class| |-----|-----|