Search results

Localization and RTL

Localization

The Localization library allows you to localize default text content of the ColorPicker. The ColorPicker 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.

The following list of properties and its values are used in the ColorPicker.

Locale key en-US (default)
Apply Apply
Cancel Cancel
ModeSwitcher Switch Mode

To load translation object in an application, define the culture and the component locale text corresponding to the language in a separate locale.json file under wwwroot folder.

locale.json

{
    "de-DE": {
    "colorpicker": {
      "Apply": "Anwenden",
      "Cancel": "Abbrechen",
      "ModeSwitcher": "Modus wechseln"
    }
    }
}
@using Syncfusion.EJ2.Blazor.Inputs

<EjsColorPicker></EjsColorPicker>

@code {
    [Inject]
    protected IJSRuntime JsRuntime { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        this.JsRuntime.Ejs().LoadLocaleData("wwwroot/locale.json").SetCulture("de-DE");
    }
}

Output be like color-picker

RTL

ColorPicker component has RTL support. It helps to render the ColorPicker 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 ColorPicker component is rendered in RTL mode with arabic locale.

@using Syncfusion.EJ2.Blazor.Inputs

<EjsColorPicker EnableRtl="true"></EjsColorPicker>

@code {
    [Inject]
    protected IJSRuntime JsRuntime { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        this.JsRuntime.Ejs().LoadLocaleData("wwwroot/locale.json").SetCulture("ar-AE");
    }
}

Output be like color-picker

Contents
Contents