Localization and RTL in Blazor Color Picker Component

9 Feb 20241 minute to read


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 page for the introduction and configuring the localization.

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.

Locale key en-US (default culture) de (Deutsch culture)
ColorPicker_Apply Apply Anwenden
ColorPicker_Cancel Cancel Abbrechen
ColorPicker_ModeSwitcher Switch Mode Modus wechseln
@using Syncfusion.Blazor.Inputs


Localization in Blazor ColorPicker


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 property to true.

In the following example, Color Picker component is rendered in RTL mode with arabic locale.

@using Syncfusion.Blazor.Inputs

<SfColorPicker EnableRtl="true"></SfColorPicker>

Right to Left in Blazor ColorPicker