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; }