- Localization
- Right to Left - RTL
- See Also
Contact Support
Localization in EJ2 TypeScript Color picker control
29 Aug 20237 minutes to read
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 words | Text |
---|---|
Apply | Apply |
Cancel | Cancel |
ModeSwitcher | Switch Mode |
Loading translations
To load translation object in an application use load
function of L10n
class.
The below example demonstrates the ColorPicker in Deutsch
culture.
import { ColorPicker } from '@syncfusion/ej2-inputs';
import { enableRipple, L10n } from '@syncfusion/ej2-base';
enableRipple(true);
L10n.load({
'de-DE': {
'colorpicker': {
"Apply": "Anwenden",
"Cancel": "Abbrechen",
"ModeSwitcher": "Modus wechseln"
}
}
});
let colorPicker: ColorPicker = new ColorPicker({ locale: 'de-DE' }, '#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 ColorPicker</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="TypeScript ColorPicker Component" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div class='wrap'>
<h4>Choose color</h4>
<input id="element" type="color" />
</div>
</div>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
Right to Left - 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
.
The following example illustrates how to enable right-to-left support in ColorPicker component.
import { ColorPicker } from '@syncfusion/ej2-inputs';
import { enableRipple, L10n } from '@syncfusion/ej2-base';
enableRipple(true);
L10n.load({
'ar-AE': {
'colorpicker': {
'Apply': 'تطبيق',
'Cancel': 'إلغاء',
'ModeSwitcher': 'مفتاح كهربائي الوضع'
}
}
});
let colorPicker: ColorPicker = new ColorPicker({ enableRtl: true, locale: 'ar-AE' }, '#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 ColorPicker</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="TypeScript ColorPicker Component" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div class='wrap'>
<h4>Choose color</h4>
<input id="element" type="color" />
</div>
</div>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}