Clicking this button will increment the signal for the list by 5
<p> Clicking this button will increment the signal for the list by 5 <ch5-button label="Btn1" sendEventOnClick="trigH1"></ch5-button> </p> <ch5-list size="10" orientation="horizontal" indexId="idx" minWidth="250px" maxWidth="500px" minHeight="100px" maxHeight="150px" itemWidth="125px" itemHeight="75px" scrollbar="true" receiveStateSize="sigH1"> <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; }
Clicking this button will increment the signal for the list by 5
<p> Clicking this button will increment the signal for the list by 5 <ch5-button label="Btn1" sendEventOnClick="trigV1"></ch5-button> </p> <ch5-list size="10" orientation="vertical" indexId="idx" minWidth="150px" maxWidth="165px" minHeight="100px" maxHeight="150px" itemWidth="150px" itemHeight="75px" scrollbar="true" receiveStateSize="sigV1"> <template> <div class="vertical-list-item"> <span>item_{{idx}}</span> </div> </template> </ch5-list>
.vertical-list-item { border: 1px solid transparent; color: #155724; background-color: #d4edda; border-color: #c3e6cb; display: table; width: 100%; height: 100%; } .vertical-list-item span { display: table-cell; vertical-align: middle; text-align: center; }