Localization and RTL in Blazor Color Picker Component

23 Aug 20211 minute to read

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 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 its 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

<SfColorPicker></SfColorPicker>

Output will be like below,

Localization in Blazor ColorPicker

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 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>

Output will be like below,

Right to Left in Blazor ColorPicker