Localization and RTL in Blazor Color Picker Component
9 Feb 20241 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 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
<SfColorPicker></SfColorPicker>
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>