https://github.com/andreasbm/an-translate
A showcase of how custom attributes can be used for translations.
https://github.com/andreasbm/an-translate
Last synced: 4 months ago
JSON representation
A showcase of how custom attributes can be used for translations.
- Host: GitHub
- URL: https://github.com/andreasbm/an-translate
- Owner: andreasbm
- Created: 2017-11-20T23:59:17.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-07T20:31:49.000Z (over 8 years ago)
- Last Synced: 2024-12-30T00:28:32.368Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 15.6 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# an-translate
This is a cool showcase of how web components and custom attributes can be used for translations.
Demo: [https://andreasbm.github.io/an-translate/](https://andreasbm.github.io/an-translate/)
## 👍 Step 1 - Create a JSON file with your strings
```json
{
"title": "Hello World!",
"subtitle": "This is a cool showcase of how web components and custom attributes can be used for translations.",
"language": {
"danish": "Danish",
"english": "English"
}
}
```
## 👊 Step 2 - Load the translation strings through an-translate-controller
Can either be in markup.
```html
```
Or in Javascript.
```js
const translate = document.querySelector("an-translate-controller");
translate.src = "strings/en.json";
```
## 💪 Step 3 - Use the an-translate attribute to get the translated strings
```html
```
Will result in:
```
Hello World!
English
```
The strings will of course update themselves whenever you change the attribute value or the strings source.
You can also get the translations, using the get method on the AnTranslateController.
```js
translate.get("title", { name: "World" })); // Hello World!
```
## 🤘 Step 4 - Use placeholders and fill them out on run time
If you want to use placeholders, that is possible. Use the double curly brackets syntax {{ key }} in your strings (the spaces are optional) and interpolate them in the attribute value using the ":" character followed by a key-value pairs object. Like this:
```json
{
"title": "{{ greeting }} {{ name }}!",
}
```
```html
```
Will result in:
```
Hello World!
Good morning Andreas!
```
# 👏 Licence
MIT