Notifications
unread notification
Emily Johnson
commented on a task in
Design Sprint
12 minutes ago
upload notification
Michael Lee
uploaded files to
Marketing Assets
25 minutes ago
server alert
Server #3
CPU usage exceeded 90%
Just now
Just now
alert
Sophia Ray
flagged an issue in
Bug Tracker
40 minutes ago
event notification
David Kim
scheduled a meeting for
UX Review
1 hour ago
edit
Isabella White
updated the document in
Product Specs
2 hours ago
deployment
Production Server
deployment completed successfully
30 minutes ago
30 minutes ago
i18 Support
Example
You can change the language of demo text as well as the menu with simple function fire on buttons click. Try it:
Example:
i18support Configuration
Step 1
To enable i18n support in your application, you need to define all translatable text. The most effective way to do this is by storing the text in an external JSON file. For example:
en.json
{
"dashboards": "Dashboards",
"dashboard-one": "Dashboard v.1",
"dashboard-two": "Dashboard v.2"
}
es.json
{
"dashboards": "Paneles",
"dashboard-one": "Panel v.1",
"dashboard-two": "Panel v.2"
}
ru.json
{
"dashboards": "Панели",
"dashboard-one": "Панель v.1",
"dashboard-two": "Панель v.2"
}
Step 2
Next you need to add html indicators in all place you want to use
data-lang
.
<div>
<span data-lang="dashboards"> Dashboards </span>
<span data-lang="dashboard-one"> Dashboard v.1 </span>
<span data-lang="dashboard-two"> Dashboard v.2 </span>
</div>
Step 3
After that if you want to change the language you just need to add buttons and fire the
selectedLanguage
.
HTML Code
<a class="btn btn-light" data-translator-lang="en"> Set EN language</a>
<a class="btn btn-light" data-translator-lang="es"> Set ES language</a>
Javascript Code
let selectedLanguage = "en";