Vue Interface

Appearance

Pagination ​

The pagination component provides flexible and customizable pagination control with customizable sizes, colors, and states.

Installation ​

bash
pnpm i @vue-interface/pagination
bash
yarn add @vue-interface/pagination
bash
npm i @vue-interface/pagination
bash
bun i @vue-interface/pagination

Props ​

The pagination component utilizes five Vue props for different customizations.

PropUsage SyntaxDescription
page:page="[value]" Active page
total-pages:total-pages="[value]" Total number of pages
show-pages:show-pages="[value]" Number of pages visible
sizesize="pagination-[size]"Pagination Size
colorcolor="pagination-[color]"Pagination Color
alignalign="[value]"Custom Alignment
disableddisabledToggle disabled state

Basic Usage ​

Page: 1
html
<Pagination v-model="pageNum" :total-pages="100" class="mb-3"></Pagination>

<Pagination :page="1" :total-pages="100" class="mb-3"></Pagination>
<Pagination :page="50" :total-pages="100" class="mb-3"></Pagination>
<Pagination :page="100" :total-pages="100" class="mb-3"></Pagination>
<Pagination :page="50" :total-pages="100" class="mb-3" disabled></Pagination>

Sizes ​

Customize the size of a pagination component using a predetermined size, tailwind's numeric sizing classes, or an arbitrary CSS length unit.

Predetermined Sizes ​

The size can be customized using predetermined size prop values: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl. Use the syntax: pagination-[size].

Show Code
html
<Pagination size="pagination-xs" :page="1" :total-pages="100" class="mb-3"></Pagination>
<Pagination size="pagination-sm" :page="1" :total-pages="100" class="mb-3"></Pagination>
<Pagination size="pagination-md" :page="1" :total-pages="100" class="mb-3"></Pagination>
<Pagination size="pagination-lg" :page="1" :total-pages="100" class="mb-3"></Pagination>
<Pagination size="pagination-xl" :page="1" :total-pages="100" class="mb-3"></Pagination>
<Pagination size="pagination-2xl" :page="1" :total-pages="100" class="mb-3"></Pagination>
<Pagination size="pagination-3xl" :page="1" :total-pages="100" class="mb-3"></Pagination>
<Pagination size="pagination-4xl" :page="1" :total-pages="100" class="mb-3"></Pagination>
<Pagination size="pagination-5xl" :page="1" :total-pages="100" class="mb-3"></Pagination>

Tailwind Sizes ​

For more granular control over sizes, use Tailwind's numeric sizing scale classes: pagination-1 - pagination-96.

Show Code
html
<Pagination size="pagination-3" :page="1" :total-pages="100" class="mb-3"></Pagination>
<Pagination size="pagination-4" :page="1" :total-pages="100" class="mb-3"></Pagination>
<Pagination size="pagination-5" :page="1" :total-pages="100" class="mb-3"></Pagination>
<Pagination size="pagination-6" :page="1" :total-pages="100" class="mb-3"></Pagination>

Arbitrary Sizes ​

For precise sizing, specify exact pixel values using the syntax pagination-[Npx] or any other CSS length units (rem, em, mm, etc.).

Show Code
html
<Pagination size="pagination-[16px]" :page="1" :total-pages="100" class="mb-3"></Pagination>
<Pagination size="pagination-[1.5rem]" :page="1" :total-pages="100" class="mb-3"></Pagination>

Custom Colors ​

Customize the color of a pagination component with the Tailwind color palette by specifying the color prop: color="pagination-[color]".

Show Code
html
<Pagination color="pagination-amber-500" :page="1" :total-pages="100" class="mb-3"></Pagination>
<Pagination color="pagination-green-500" :page="1" :total-pages="100" class="mb-3"></Pagination>
<Pagination color="pagination-purple-500" :page="1" :total-pages="100" class="mb-3"></Pagination>
<Pagination color="pagination-neutral-500" :page="1" :total-pages="100" class="mb-3"></Pagination>

Alignment ​

Customize the alignment of the pagination component on the page using the align prop. Syntax: align="[value]".

ValueResult
startLeft-Aligned
center Centered
endRight-Aligned
Show Code
html
<Pagination align="start" :page="1" :total-pages="100" class="mb-3"></Pagination>
<Pagination align="center" :page="1" :total-pages="100" class="mb-3"></Pagination>
<Pagination align="end" :page="1" :total-pages="100" class="mb-3"></Pagination>

Custom Display Amount ​

Customize the number of pages that display in the pagination component using the :show-pages prop. Syntax: :show-pages="[number of pages]"

WARNING

The value of show-pages must be an even number

Show Code
html
<Pagination :page="50" :total-pages="100" :show-pages="2" class="mb-3"></Pagination>
<Pagination :page="50" :total-pages="100" :show-pages="8" class="mb-3"></Pagination>
<Pagination :page="50" :total-pages="100" :show-pages="10" class="mb-3"></Pagination>

Reactive Page Prop ​

The current page is: 1

html
<Pagination :page="page" :total-pages="100" class="mb-3"></Pagination>
js
import { ref, onMounted } from 'vue'
const page = ref(1)

onMounted(() => {
    setTimeout(() => {
        page.value = 50
    }, 1000)
})