Crestron Components Lib - Showcase App

ch5-list: bufferAmount

ch5-list: bufferAmount

The number of list elements to be created and to be added when a scroll/swipe is executed.

Example for a horizontal list:

When scrolling this list and reach the end of the loaded elements a new group of buffered elements will be added. This will continue until all the elements have been loaded

Example without setting the maxWidth attribute.

<p>When scrolling this list and reach the end of the loaded elements a new group of buffered elements will be added.
    This will continue until all the elements have been loaded</p>

<ch5-list
           size="50"
           orientation="horizontal"
           indexId="idx"
           minWidth="250px"
           maxWidth="500px"
           minHeight="100px"
           maxHeight="150px"
           itemWidth="125px"
           itemHeight="75px"
           scrollbar="true"
           bufferAmount="10">
    <template>
        <div class="horizontal-list-item">
            <span>item_{{idx}}</span>
        </div>
    </template>
</ch5-list>

<p>Example without setting the maxWidth attribute.</p>
    <ch5-list
        size="50"
        orientation="horizontal"
        indexId="idx"
        minHeight="100px"
        maxHeight="500px"
        itemWidth="100px"
        itemHeight="75px"
        scrollbar="true"
        bufferAmount="10" >
        <template>
            <div class="horizontal-list-item">
                <span>item {{idx}}</span>
            </div>
        </template>
    </ch5-list>

ch5-list: bufferAmount

The number of list elements to be created and to be added when a scroll/swipe is executed.

Example for a vertical list:

When scrolling this list and reach the end of the loaded elements a new group of buffered elements will be added. This will continue until all the elements have been loaded


<p>When scrolling this list and reach the end of the loaded elements a new group of buffered elements will be added.
This will continue until all the elements have been loaded</p>
<ch5-list id="demo-list-2"
           size="500"
           orientation="vertical"
           indexId="idx"
           minWidth="150px"
           maxWidth="165px"
           minHeight="100px"
           maxHeight="250px"
           itemWidth="150px"
           itemHeight="75px"
           scrollbar="true"
           bufferAmount="20">
    <template>
        <div class="vertical-list-item">
            <span>item_{{idx}}</span>
        </div>
    </template>
</ch5-list>