Toggle the list between being enabled / disabled. While the list is disabled, click / touch events will not be triggered (pointer-events: none) and the opacity value is lowered.
The list below is initially disabled via the 'disabled' attribute.
<p>Toggle the list between being <i>enabled</i> / <i>disabled</i>. While the list is disabled, click / touch events
will not be triggered (pointer-events: none) and the opacity value is lowered.</p>
<ch5-button label="Click to change the hall_lights_selected signal" sendEventOnClick="hall_lights_tap"></ch5-button>
<p>The list below is initially disabled via the <b>'disabled'</b> attribute.</p>
<ch5-list id="demo-list-1"
size="15"
disabled
receiveStateEnable="hall_lights_selected"
debug
orientation="horizontal"
indexId="idx"
minWidth="250px"
maxWidth="500px"
minHeight="100px"
maxHeight="150px"
itemWidth="125px"
itemHeight="75px"
scrollbar="true">
<template>
<div class="horizontal-list-item">
<span>item_{{idx}}</span>
</div>
</template>
</ch5-list>
.horizontal-list-item {
border: 1px solid transparent;
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
display: table;
width: 100%;
height: 100%;
}
.horizontal-list-item span {
display: table-cell;
vertical-align: middle;
text-align: center;
}