Crestron Components Lib - Showcase App

ch5-spinner: iconPosition attribute

The default behaviour of iconPosition attribute:
The icon is positioned in the left side of the label, which is the default position when the iconPosition attribute is not set.
When text direction is 'rtl', than the default position of the icon will be on 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 the text 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 the text direction 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>