Here you can play with the Crestron Components Library and the Emulator by entering/modifying a JSON that defines an Emulator Scenario, by modifying component configuration or by adding/modifying HTML, JS and/or CSS
Ch5 button with an SVG icon
Ch5 image using an SVG source
The following elements are using defaults and template variables defined in the component configuration section
<div class="playground_btn_container content"> <button class="button is-info btn_playground1" type="button">Btn1</button> <button class="button is-info btn_playground2" type="button">Btn2</button> </div> <ch5-button type="success" shape="rectangle" label="ReceiveLabelFromSignal" receiveStateLabel="btn_receive_label"></ch5-button> <p></p> <p> Ch5 button with an SVG icon <br> <ch5-button label="SVG Icon" iconClass="svg-icon" ></ch5-button> </p> <p> Ch5 image using an SVG source <br> <ch5-image width="100px" url="https://upload.wikimedia.org/wikipedia/en/9/9f/Twitter_bird_logo_2012.svg"> </ch5-image> </p> <p></p> <div class="row"> <p> The following elements are using defaults and template variables defined in the component configuration section</p> <div> <ch5-button></ch5-button> <ch5-button id="btn1"></ch5-button> <ch5-button id="btn2"></ch5-button> </div> <br> <div> <ch5-select id="volume1"> <template> <ch5-select-option> <i class="fas fa-{{fa-icon}}"></i> <span>{{label}}</span> </ch5-select-option> </template> </ch5-select> </div> </div> <ch5-import-htmlsnippet class="buttons-page" id="buttonsPage" url="http://127.0.0.1:8082/ch5-button/ch5-button-types.html"></ch5-import-htmlsnippet>
(function(){ var btn1 = document.querySelector('.btn_playground1'); var btn2 = document.querySelector('.btn_playground2'); var sigName='btn_receive_label'; btn1.removeEventListener('click',btn1Listener); btn2.removeEventListener('click',btn2Listener); btn1.addEventListener('click',btn1Listener); btn2.addEventListener('click',btn2Listener); function btn1Listener(){ var label1='Label1'; CrComLib.publishEvent('s',sigName,label1); } function btn2Listener() { var label2=CrComLib.textformat('{1} created on {2}. {1} text populated with {3}','Label',new Date(),'CrComLib.textcontent()'); CrComLib.publishEvent('s',sigName,label2); } })();
.my-css-class { border: 1px dashed red; } .svg-icon { background-image: url('https://upload.wikimedia.org/wikipedia/en/9/9f/Twitter_bird_logo_2012.svg'); background-size:contain; background-repeat:no-repeat; width: 20px; height: 20px; display:inline-block; }