@inkline/inkline/src/components/IPagination/template.html

Inkline is the Vue.js UI/UX Library built for creating your next design system

<nav
    class="pagination"
    :class="classes"
    role="navigation"
    :aria-label="ariaLabel"
>
    <ul class="pagination-items">
        <li
            class="pagination-item -previous"
            :class="{ '-disabled': modelValue === 1 }"
            v-if="pageCount > 0"
            @click="previous"
        >
            <span aria-hidden="true">
                <slot name="previous">&lt;</slot>
            </span>
        </li>
        <li
            class="pagination-item -first"
            :class="{ '-active': modelValue === 1 }"
            v-if="pageCount > 0"
            @click="onClick(1)"
        >
            1
        </li>
        <li
            class="pagination-item -quick-previous"
            :class="{ '-disabled': !quickLink }"
            v-if="showQuickPrevious"
            @click="quickPrevious"
        >
            &hellip;
        </li>
        <li
            class="pagination-item"
            :class="{ '-active': modelValue === page }"
            :aria-current="modelValue === page ? 'page' : false"
            v-for="page in pages"
            @click="onClick(page)"
        >
            {{page}}
        </li>
        <li
            class="pagination-item -quick-next"
            :class="{ '-disabled': !quickLink }"
            v-if="showQuickNext"
            @click="quickNext"
        >
            &hellip;
        </li>
        <li
            class="pagination-item -last"
            :class="{ '-active': modelValue === pageCount }"
            v-if="pageCount > 1"
            @click="onClick(pageCount)"
        >
            {{pageCount}}
        </li>
        <li
            class="pagination-item -next"
            :class="{ '-disabled': modelValue === pageCount }"
            v-if="pageCount > 0"
            @click="next"
        >
            <span aria-hidden="true">
                <slot name="next">&gt;</slot>
            </span>
        </li>
    </ul>
</nav>