-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmessage-icu.html
96 lines (84 loc) · 3.49 KB
/
message-icu.html
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
96
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>intl-message demo with i18next-icu</title>
<style>
html { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; }
intl-message { display: block; }
</style>
</head>
<body>
<h1>intl-message demo with <a href="https://www.npmjs.com/package/i18next-icu" target="_blank">i18next-icu</a></h1>
<intl-message label="undefined.key"></intl-message>
<intl-message label="test:key"></intl-message>
<intl-message label="key" ns="test"></intl-message>
<intl-message label="title" value="Title"></intl-message>
<intl-message label="two" options='["Hello","World"]'></intl-message>
<intl-message label="two" options='{"0":"Hola","1":"Mundo"}'></intl-message>
<intl-message label="twoValues" value="bonjour" value1="le monde" lng="fr"></intl-message>
<intl-message label="html" value="<span style='color: red'>dangerous</span>"></intl-message>
<!-- dangerous has no effect here -->
<intl-message label="html" dangerous value="<span style='color: red'>dangerous</span>"></intl-message>
<intl-message label="item" count="0"></intl-message>
<intl-message label="item" count="1"></intl-message>
<intl-message label="item" count="10"></intl-message>
<intl-message label="price" value="100"></intl-message>
<intl-message label="cats" count="4103"></intl-message>
<intl-message label="catsPerc" value="0.534"></intl-message>
<intl-message label="date" value="2020-03-12T12:13:56Z"></intl-message>
<intl-message label="select" value="male"></intl-message>
<intl-message label="select" value="female"></intl-message>
<intl-message label="select" value=""></intl-message>
<intl-message label="nestedSelect" value=""></intl-message>
<intl-message label="nestedSelect" value="yes" taxrate="0.12"></intl-message>
<!-- always load i18next first -->
<script src="https://unpkg.com/i18next@19/i18next.min.js"></script>
<script src="https://unpkg.com/i18next-icu@1/dist/umd/i18nextICU.min.js"></script>
<script src="https://unpkg.com/i18next-wc/dist/intl-message.js"></script>
<!-- <script src="../dist/intl-message.js"></script> -->
<script>
i18next
.use(i18nextICU)
.init({
i18nFormat: {
formats: {
number: {
USD: { style: "currency", currency: "USD" }
}
}
},
lng: "en",
fallbackLng: "en",
resources: {
en: {
default: {
title: "My {value}",
two: "{0} {1}!",
twoValues: "{value} {value1}!",
html: "With HTML it might get {value}",
item: "You have {count, plural, =0 {no photos} =1 {one photo} other {# photos}}.",
price: 'The price is: {value, number, USD}',
cats: 'I have {count, number} cats.',
catsPerc: 'Almost {value, number, percent} of them are black.',
date: 'Sale begins {value, date, medium} at {value, time, short}',
select: '{value, select, male {He} female {She} other {They}} will respond shortly.',
nestedSelect: '{value, select, yes {An additional {taxrate, number, percent} tax will be collected.} other {No taxes apply.}}'
},
test: {
key: "A value"
}
},
fr: {
default: {
twoValues: "{value} {value1} !",
}
}
},
defaultNS: "default",
fallbackNS: "global"
})
</script>
<script src="iframeheight.js"></script>
</body>
</html>