Crestron Components Lib - Showcase App

ch5-spinner: iconPosition attribute

Default behaviour of iconPosition attribute:
The icon is positioned in the left side of the label, that's the default position when the iconPosition attribute is not set.
When direction of document writing is 'rtl', than the default position of the icon will be in the right side of the label
<ch5-spinner
    label="item {{idx}}"
    size="7"
    itemHeight="40"
    indexId="idx"
    visibleItemScroll="3">
    <template>
        <div>
            <i class="ch5-spinner__icon fas fa-plane"></i>
            <label class="ch5-spinner__label">Item {{idx}}</label>

        </div>
    </template>
</ch5-spinner>
Setting the iconPosition attribute to last:
The icon will be positioned after the label element.
<ch5-spinner
    label="item {{idx}}"
    size="7"
    itemHeight="40"
    indexId="idx"
    iconPosition="last"
    visibleItemScroll="3">
    <template>
        <div>
            <i class="ch5-spinner__icon fas fa-plane"></i>
            <label class="ch5-spinner__label">Item {{idx}}</label>

        </div>
    </template>
</ch5-spinner>
Setting the iconPosition attribute to last when writing direction is rtl:
The icon will be positioned on the left side of the label element.
<ch5-spinner
    dir="rtl"
    label="item {{idx}}"
    size="7"
    itemHeight="40"
    indexId="idx"
    iconPosition="last"
    visibleItemScroll="3">
    <template>
        <div>
            <i class="ch5-spinner__icon fas fa-plane"></i>
            <label class="ch5-spinner__label">Item {{idx}}</label>

        </div>
    </template>
</ch5-spinner>
Setting the iconPosition attribute to first when document writing is rtl
The icon will be positioned after the label element.
<ch5-spinner
    dir="rtl"
    label="item {{idx}}"
    size="7"
    itemHeight="40"
    indexId="idx"
    iconPosition="first"
    visibleItemScroll="3">
    <template>
        <div>
            <i class="ch5-spinner__icon fas fa-plane"></i>
            <label class="ch5-spinner__label">Item {{idx}}</label>

        </div>
    </template>
</ch5-spinner>