1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
---
layout: default
title: Translations
parent: How-to guide
---
# Translations
To use `I18n` translations, add a sidecar YAML file:
```yml
# app/components/example_component.yml
en:
hello: "Hello world!"
```
Translations can also be defined in per-locale files:
```yml
# app/components/example_component.en.yml
en:
hello: "Hello world!"
# app/components/example_component.fr.yml
fr:
hello: "Bonjour le monde !"
```
These files can be automatically generated by the component generator when the `--locale` flag is specified.
Access component-local translations with a leading dot:
```erb
<%# app/components/example_component.html.erb %>
<%= t(".hello") %>
```
Global Rails translations are available as well:
```erb
<%# app/components/example_component.html.erb %>
<%= t("my.global.translation") %>
```
Including translations namespaced under the component name:
```yml
# config/locales/en.yml
en:
my_module:
example_component:
hello: "Hello world!"
```
```erb
<%# app/components/my_module/example_component.html.erb %>
<%= t(".hello") %>
```
Access global translations via `helpers` or `I18n`:
```erb
<%# app/components/example_component.html.erb %>
<%= helpers.t("hello") %>
<%= I18n.t("hello") %>
```
## Inheritance
Translations are inherited from the component's parent class. Given a parent component with a translation file:
```yml
# app/components/parent_component.yml
en:
hello: "Hello world!"
greeting: "Cheers!"
```
The translation is available in subclasses of `ParentComponent`, allowing translations to be used as-is or overridden by the subclass:
```yml
# app/components/child_component.yml
en:
greeting: "Howdy!"
```
```rb
# app/components/child_component.rb
class ChildComponent < ParentComponent
def call
t(".hello") # => "Hello world!" (inherited)
t(".greeting") # => "Howdy!" (overridden)
end
end
```
|
