Button:
Changes the value of the string signal temperature_in_city to "37 degrees Celsius"
Changes the value of the string signal temperature_in_city to "20 degrees Celsius"
Image alt:
Select
Toggle
Modal Dialog
Spinner:
<label for="language">Change language</label>
<select onchange="changeLanguage(this.value)" id="language">
<option value="en">en</option>
<option value="de">de</option>
<option value="cz">cz</option>
</select>
<br />
<br />
<h4>Subscribe</h4>
<ch5-textinput
placeholder="-+firstname.placeholder+-"
feedbackMode="submit"
label="-+firstname.label+-"
>
</ch5-textinput>
<br />
<ch5-toggle
label="-+gender.label+-"
labelOn="-+gender.m+-"
labelOff="-+gender.f+-"
>
</ch5-toggle>
<br />
<ch5-button
label="-+button.save+-"
size="small"
type="primary"
></ch5-button>
<ch5-button
label="-+button.reset+-"
size="small"
type="danger"
>
</ch5-button>
<div class="components">
<h4>All components: </h4>
<div class="component">
<p><strong>Button:</strong></p>
<ch5-button
label="-+button.save+-">
</ch5-button>
</div>
<br />
<br />
<h4>data-ch5-textcontent</h4>
<p>
Changes the value of the string signal temperature_in_city to "37 degrees Celsius"
<ch5-button sendEventOnClick="trigger_11" label="T1"></ch5-button>
</p>
<p>
Changes the value of the string signal temperature_in_city to "20 degrees Celsius"
<ch5-button sendEventOnClick="trigger_21" label="T2"></ch5-button>
</p>
<div id="textcontent-el-1" class="b-red"
data-ch5-textcontent="temperature_in_city">
DIV: Testing data-ch5-textcontent
</div>
<br />
<br />
<br />
<h4>data-ch5-i18n</h4>
<div data-ch5-i18n="-+i18ntext.body+-"></div>
<div data-ch5-i18n="-+[inner=span#test-span]i18ntext.body+-">
<span>Testing with inner html</span><br>
<span id='test-span'></span>
</div>
<img src="ch5image.png" data-ch5-i18n="-+[attr=alt]i18ntext.imagetext+-" />
<br />
<div class="component">
<p>Image alt:</p>
<ch5-image alt="-+image.alt+-"></ch5-image>
</div>
<div class="component">
<p>Select</p>
<ch5-select size="5" indexId="idx" noneSelectedPrompt="-+select.noneSelectedPrompt+-">
<template>
<ch5-select-option>
<div>
<span>item_{{idx}}</span>
</div>
</ch5-select-option>
</template>
</ch5-select>
</div>
<div class="component">
<p>Toggle</p>
<ch5-toggle
label="-+gender.label+-"
labelOn="-+gender.m+-"
labeloff="-+gender.f+-"
></ch5-toggle>
</div>
<div class="component">
<p>Modal Dialog</p>
<ch5-modal-dialog
receiveStateShowPulse="trigger_1"
closable
mask
title="-+modalDialog.title+-"
okButtonLabel="-+modalDialog.okButton+-"
cancelButtonLabel="-+modalDialog.cancelButton+-"
prompt="-+modalDialog.prompt+-">
<ch5-image
id="ex1-img"
url="https://picsum.photos/200/300/?random">
</ch5-image>
</ch5-modal-dialog>
<ch5-button
sendEventOnClick="trigger_1"
label="-+button.show+-"
>
</ch5-button>
</div>
<div class="component">
<p>Spinner:</p>
<ch5-spinner
label="-+spinner.label+- {{idx}}"
indexId="idx"
size="40"
itemHeight="40"
visibleItemScroll="3">
</ch5-spinner>
</div>
</div>
window.CrComLib.registerTranslationInterface(i18next,'-+','+-');
i18next.init({
fallbackLng: 'en',
language: 'en',
debug: true,
resources: {
en: {
translation: {
firstname: {
placeholder: 'Enter your firstname',
label: 'Firstname'
},
gender: {
label: 'Gender',
m: 'M',
f: 'F'
},
button: {
save: 'Subscribe Now',
reset: 'Remove my data',
show: 'Show the modal',
},
temperature:{
temp37:'37 degrees Celsius',
temp20:'20 degrees Celsius'
},
image: {
alt: "Image Alternative Title"
},
select: {
noneSelectedPrompt: 'Select an item',
},
modalDialog: {
title: 'Modal title',
okButton: 'Like',
cancelButton: 'Close',
prompt: "There's just a placeholder for the image bellow",
},
spinner: {
label: 'Item'
},
i18ntext: {
body: 'This is dummy text for data-ch5-i18n attribute testing.',
imagetext: 'Placeholder text for image.'
}
}
},
de: {
translation: {
firstname: {
placeholder: 'Bitte Ihr Vorname',
label: 'Vorname',
},
gender: {
label: 'Geschlecht',
m: 'M',
f: 'W',
},
button: {
save: 'Abonniere jetzt',
reset: 'Entferne meine Daten',
show: 'Zeige das Modal',
},
temperature:{
temp37:'37 Grad Celsius',
temp20:'20 Grad Celsius'
},
image: {
alt: "Image Alternative Titel",
},
select: {
noneSelectedPrompt: 'Wähle einen Artikel aus',
},
modalDialog: {
title: 'Modal titel',
okButton: 'Liebe',
cancelButton: 'Schließen',
prompt: "Es gibt nur einen Platzhalter für das Bild unten",
},
spinner: {
label: 'Artikel'
},
i18ntext: {
body: 'Dies ist ein Dummy-Text für das Testen von Attributen in data-ch5-i18n.',
imagetext : 'Platzhaltertext für Bild.'
}
},
},
cz: {
translation: {
firstname: {
placeholder: 'Prosím, své první jméno',
label: 'Jméno',
},
gender: {
label: 'Rod',
m: 'M',
f: 'Z',
},
button: {
save: 'Zaregistrujte se nyní',
reset: 'Odebrat data',
show: 'Zobrazit modální',
},
temperature:{
temp37:'37 stupňů Celsia',
temp20:'20 stupňů Celsia'
},
image: {
alt: "Alternativní název obrázku",
},
select: {
noneSelectedPrompt: 'Vyberte položku',
},
modalDialog: {
title: 'Modální název',
okButton: 'Milovat',
cancelButton: 'Zavřít',
prompt: "Pro níže uvedený obrázek je pouze zástupný symbol",
},
spinner: {
label: 'Položka'
},
i18ntext: {
body: 'Toto je fiktivní text pro testování atributů v datech-ch5-i18n.',
imagetext: 'zástupný text pro obrázek.'
}
},
},
}
});
function changeLanguage(language) {
if(typeof language !== 'undefined' && language !== '') {
i18next.changeLanguage(language);
}
}
.components {
margin-top: 80px;
}
.components p {
font-weight: bold;
}
.components .component {
margin-bottom: 40px;
}
.b-red{
border:3px solid red;
}
.b-blue{
border:3px solid blue;
}