Clicking this button will increment the signal for the list by 2
Clicking this button will set new template vars
Clicking this button will set the size to 4, then last 3 select options should be removed
Clicking this button will set the size to 10, then last 3 more select options should be added
<div class="row"> <ch5-select id="direction_select" size="20" indexId="Index" receiveStateSize="ch5_select_receive_signal_size" receiveStateTemplateVars="ch5_select_receive_signal_tmpl_vars" noneSelectedPrompt="Select"> <template> <ch5-select-option> <i class="fas fa-arrow-{{fa-icon}}"></i> <span>{{description}}</span> </ch5-select-option> </template> </ch5-select> <p style="margin-top: 24px"> Clicking this button will increment the signal for the list by 2 </p> <p> <ch5-button label="Update size" sendEventOnClick="trigCh5SelectSizeIncrement"></ch5-button> </p> <p style="margin-top: 24px"> Clicking this button will set new template vars </p> <p> <ch5-button label="Update tmpl vars" sendEventOnClick="trigCh5SelectTmplVarsUpdate"></ch5-button> </p> </div> <div class="row"> <strong>ch5-select: receiveStateSize will not rebuild existing options.</strong> It will remove unneeded options if size received is less than options length or it will add missing options if size received is bigger that options length </div> <div class="row"> <ch5-select id="direction_select" size="7" indexId="Index" receiveStateSize="ch5_select_receive_signal_set_size_1" noneSelectedPrompt="Select"> <template> <ch5-select-option> <span>{{description}}</span> </ch5-select-option> </template> </ch5-select> <p style="margin-top: 24px"> Clicking this button will set the size to 4, then last 3 select options should be removed </p> <p> <ch5-button label="Update size to 4" sendEventOnClick="trigCh5SelectSetSize_1"></ch5-button> </p> </div> <div class="row"> <ch5-select id="direction_select" size="7" indexId="Index" receiveStateSize="ch5_select_receive_signal_set_size_2" noneSelectedPrompt="Select"> <template> <ch5-select-option> <span>{{description}}</span> </ch5-select-option> </template> </ch5-select> <p style="margin-top: 24px"> Clicking this button will set the size to 10, then last 3 more select options should be added </p> <p> <ch5-button label="Update size to 10" sendEventOnClick="trigCh5SelectSetSize_2"></ch5-button> </p> </div>
.row { padding: 24px 0; display: inline-block; width: 100%; } .ch5-select .ch5-select__panel__item > * { margin: 8px; }