Crestron Components Lib - Showcase App

ch5-list: size

ch5-list: size

Default value: 1.

The following example shows horizontal lists of different sizes:

<ch5-list size="3"
           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>
<hr>
<ch5-list size="15"
           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>
<hr>
<ch5-list size="500"
           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: size

Default value: 1.

The following example shows vertical lists of different sizes:


<div class="columns">
    <div class="column">
        <ch5-list size="3"
                   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>
    </div>
    <div class="column">
        <ch5-list size="25"
                   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>
    </div>
    <div class="column">
        <ch5-list size="500"
                   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>
    </div>
</div>