Crestron Components Lib - Showcase App

ch5-list: minWidth, maxWidth, minHeight, maxHeight, itemHeight, itemWidth

ch5-list: minWidth,maxWidth,minHeight,maxHeight,itemHeight,itemWidth

The following example shows an horizontal list with height and width constraints

!important: always use the same unit type (available unit types: px, vh/vw)

More explicit: px unit type should not be mixed up with vh or vw types

<ch5-list id="demo-list-1"
           size="20"
           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>

ch5-list: minWidth,maxWidth,minHeight,maxHeight,itemHeight,itemWidth

The following example shows a vertical list with height and width constraints


<ch5-list id="demo-list-2"
           size="5"
           orientation="vertical"
           indexId="idx"
           minWidth="150px"
           maxWidth="165px"
           minHeight="100px"
           maxHeight="150px"
           itemWidth="150px"
           itemHeight="75px"
           scrollbar="true">
    <template>
        <div class="vertical-list-item">
            <span>item_{{idx}}</span>
        </div>
    </template>
</ch5-list>