<ch5-button type="success" shape="rectangle" label="custom class in attribute" customClass="blue-dashed-border"></ch5-button> <ch5-button type="success" shape="rectangle" label="custom class selected" customclassselected="btn-active"></ch5-button> <ch5-button type="success" shape="rectangle" label="custom class pressed" customclasspressed="btn-pressed"></ch5-button> <ch5-button type="success" shape="rectangle" label="custom class disabled" customclassdisabled="btn-disabled"></ch5-button>
.blue-dashed-border {
border: 3px dashed blue;
}
.btn-active {
background-color: blue;
}
.btn-pressed {
background-color: red;
}
.btn-disabled {
background-color: gray;
pointer-events: none;
}
This changes the value of the sig_custom_class signal to "blue-dashed-border bg1" ( see Emulator Scenario )
This changes the value of the sig_custom_class signal to "green-dotted-border bg2" ( see Emulator Scenario )
This changes the value of the sig_custom_class signal to "red-solid-border" ( see Emulator Scenario )
<p>
This changes the value of the <b>sig_custom_class</b> signal to "blue-dashed-border bg1" ( see Emulator Scenario )
<ch5-button label="trigger 1" sendEventOnClick="sig_trig_class1"></ch5-button>
</p>
<p>
This changes the value of the <b>sig_custom_class</b> signal to "green-dotted-border bg2" ( see Emulator Scenario )
<ch5-button label="trigger 2" sendEventOnClick="sig_trig_class2"></ch5-button>
</p>
<p>
This changes the value of the <b>sig_custom_class</b> signal to "red-solid-border" ( see Emulator Scenario )
<ch5-button label="trigger 3" sendEventOnClick="sig_trig_class3"></ch5-button>
</p>
<hr>
<ch5-button type="success" shape="rectangle" label="custom class/classes from signal" receiveStateCustomClass="sig_custom_class"></ch5-button>
<ch5-button type="success" shape="rectangle" label="custom class/classes from signal and also from attr" receiveStateCustomClass="sig_custom_class" customClass="blue-dashed-border"></ch5-button>
.blue-dashed-border{
border: 3px dashed blue;
}
.green-dotted-border{
border: 3px dotted green;
}
.red-solid-border{
border: 3px solid red;
}
.bg1 {
background-color: #777;
}
.bg2 {
background-color: #aaa;
}