Pager

A pager is used when there is a large amount of data, which cannot be displayed on one single page.

Pager: first page

<div class="pager">
    <ul>
        <li class="pager__page is-current">
            <a href="#">1</a>
        </li>
        <li class="pager__page">
            <a href="#">2</a>
        </li>
        <li class="pager__page">
            <a href="#">3</a>
        </li>
        <li class="pager__page">
            <a href="#">...</a>
        </li>
        <li class="pager__page">
            <a href="#">12</a>
        </li>
        <li class="pager__page pager__lastPage">
            <a href="#">
                <span class="iconMdsp arrowSingleRight"></span>
            </a>
        </li>
    </ul>
</div>

Pager: middle page

<div class="pager">
    <ul>
        <li class="pager__page pager__firstPage ">
            <a href="#">
                <span class="iconMdsp arrowSingleLeft"></span>
            </a>
        </li>
        <li class="pager__page">
            <a href="#">1</a>
        </li>
        <li class="pager__page">
            <a href="#">2</a>
        </li>
        <li class="pager__page is-current">
            <a href="#">3</a>
        </li>
        <li class="pager__page">
            <a href="#">...</a>
        </li>
        <li class="pager__page">
            <a href="#">12</a>
        </li>
        <li class="pager__page pager__lastPage">
            <a href="#">
                <span class="iconMdsp arrowSingleRight"></span>
            </a>
        </li>
    </ul>
</div>

Pager: last page

<div class="pager">
    <ul>
        <li class="pager__page pager__firstPage">
            <a href="#">
                <span class="iconMdsp arrowSingleLeft"></span>
            </a>
        </li>
        <li class="pager__page">
            <a href="#">1</a>
        </li>
        <li class="pager__page">
            <a href="#">2</a>
        </li>
        <li class="pager__page">
            <a href="#">3</a>
        </li>
        <li class="pager__page">
            <a href="#">4</a>
        </li>
        <li class="pager__page">
            <a href="#">5</a>
        </li>
        <li class="pager__page">
            <a href="#">6</a>
        </li>
        <li class="pager__page">
            <a href="#">7</a>
        </li>
        <li class="pager__page">
            <a href="#">8</a>
        </li>
        <li class="pager__page">
            <a href="#">...</a>
        </li>
        <li class="pager__page pager__lastPage is-current">
            <a href="#">12</a>
        </li>
    </ul>
</div>

Usage

ElementClassDescription
.pager .pager__page .is-current Visually labels the currently selected / active pager item.
.pager .has-textalign-right Moves the pager element to the right.

Advanced pager

  • Page 6 of 380
  • Items
<div class="pager pager--advanced">
    <ul>
        <li class="pager__page pager__firstPage">
            <a href="#">
                <span class="iconMdsp arrowSingleLeft"></span>
            </a>
        </li>
        <li class="pager__page">
            <div class="inputGroup">
                <input class="inputGroup__textInput" type="number" value="6" id="input-number25" />
            </div>
        </li>
        <li class="pager__page pager__lastPage">
            <a href="#">
                <span class="iconMdsp arrowSingleRight"></span>
            </a>
        </li>
        <li class="pager__page pager__pageCounter">
            Page 6 of 380
        </li>
        <li class="pager__page pager__itemPerPage">
            <div class="inputGroup">
                Items
                <div class="selectWrapper">
                    <select id="idol-select25" class="inputGroup__select">
                        <option value="15">15</option>
                        <option value="30">30</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>
            </div>
        </li>
    </ul>
</div>

Advanced pager with border

  • Page 2 of 283
  • Items
<div class="pager pager--advanced pager--withBorder">
    <ul>
        <li class="pager__page pager__firstPage">
            <a href="#">
                <span class="iconMdsp arrowSingleLeft"></span>
            </a>
        </li>
        <li class="pager__page">
            <div class="inputGroup">
                <input class="inputGroup__textInput" type="number" value="6" id="input-number26" />
            </div>
        </li>
        <li class="pager__page pager__lastPage">
            <a href="#">
                <span class="iconMdsp arrowSingleRight"></span>
            </a>
        </li>
        <li class="pager__page pager__pageCounter">
            Page 2 of 283
        </li>
        <li class="pager__page pager__itemPerPage">
            <div class="inputGroup">
                Items
                <div class="selectWrapper">
                    <select id="idol-select27" class="inputGroup__select">
                        <option value="15">15</option>
                        <option value="30">30</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>
            </div>
        </li>
    </ul>
</div>

Usage

ElementClassDescription
.pager .has-textalign-right Moves the pager element to the right.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top