Pagination

AkarGitHub
A list of buttons or links to navigate through pages.

Usage

Use the default-page prop or the v-model:page directive to control the current page.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <PPagination v-model:page="page" :total="100" />
</template>
The Pagination component uses some Button to display the pages, use color, variant and size props to style them.

Total

Use the total prop to set the total number of items in the list.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <PPagination v-model:page="page" :total="100" />
</template>

Items Per Page

Use the items-per-page prop to set the number of items per page. Defaults to 10.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <PPagination v-model:page="page" :items-per-page="20" :total="100" />
</template>

Sibling Count

Use the sibling-count prop to set the number of siblings to show. Defaults to 2.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <PPagination v-model:page="page" :sibling-count="1" :total="100" />
</template>

Show Edges

Use the show-edges prop to always show the ellipsis, first and last pages. Defaults to false.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <PPagination v-model:page="page" show-edges :sibling-count="1" :total="100" />
</template>

Show Controls

Use the show-controls prop to show the first, prev, next and last buttons. Defaults to true.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <PPagination v-model:page="page" :show-controls="false" show-edges :total="100" />
</template>

Color

Use the color prop to set the color of the inactive controls. Defaults to neutral.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <PPagination v-model:page="page" color="primary" :total="100" />
</template>

Variant

Use the variant prop to set the variant of the inactive controls. Defaults to outline.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <PPagination v-model:page="page" color="neutral" variant="subtle" :total="100" />
</template>

Active Color

Use the active-color prop to set the color of the active control. Defaults to primary.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <PPagination v-model:page="page" active-color="neutral" :total="100" />
</template>

Active Variant

Use the active-variant prop to set the variant of the active control. Defaults to solid.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <PPagination v-model:page="page" active-color="primary" active-variant="subtle" :total="100" />
</template>

Size

Use the size prop to set the size of the controls. Defaults to md.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <PPagination v-model:page="page" size="xl" :total="100" />
</template>

Disabled

Use the disabled prop to disable the pagination controls.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <PPagination v-model:page="page" :total="100" disabled />
</template>

Examples

With links

Use the to prop to transform buttons into links. Pass a function that receives the page number and returns a route destination.

<script setup lang="ts">
import { ref } from 'vue';

const page = ref(5);

function to(page: number) {
  return {
    query: {
      page,
    },
    hash: '#with-links',
  };
}
</script>

<template>
  <PPagination
    v-model:page="page"
    :total="100"
    :to="to"
    :sibling-count="1"
    show-edges
  />
</template>
In this example we're adding the #with-links hash to avoid going to the top of the page.

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

itemsPerPage10number

Number of items per page

siblingCount2number

Number of sibling should be shown around the current page

total0number

Number of items in your list

color'neutral'"neutral" | "primary" | "secondary" | "success" | "info" | "warning" | "error"

The color of the pagination controls.

variant'outline'"outline" | "solid" | "soft" | "subtle" | "ghost" | "link"

The variant of the pagination controls.

activeColor'primary'"neutral" | "primary" | "secondary" | "success" | "info" | "warning" | "error"

The color of the active pagination control.

activeVariant'solid'"outline" | "solid" | "soft" | "subtle" | "ghost" | "link"

The variant of the active pagination control.

defaultPagenumber

The value of the page that should be active when initially rendered.

Use when you do not need to control the value state.

pagenumber

The controlled value of the current page. Can be binded as v-model:page.

firstIconappConfig.pohon.icons.chevronDoubleLeftstring | object

The icon to use for the first page control.

prevIconappConfig.pohon.icons.chevronLeftstring | object

The icon to use for the previous page control.

nextIconappConfig.pohon.icons.chevronRightstring | object

The icon to use for the next page control.

lastIconappConfig.pohon.icons.chevronDoubleRightstring | object

The icon to use for the last page control.

ellipsisIconappConfig.pohon.icons.ellipsisstring | object

The icon to use for the ellipsis control.

size"md" | "xs" | "sm" | "lg" | "xl"
to(page: number) => string | kt | Tt

A function to render page controls as links.

showEdgesfalseboolean

When true, always show first page, last page, and ellipsis

showControlstrueboolean

Whether to show the first, previous, next, and last controls.

disabledboolean

When true, prevents the user from interacting with item

pohon{ root?: ClassValue; list?: ClassValue; ellipsis?: ClassValue; label?: ClassValue; first?: ClassValue; prev?: ClassValue; item?: ClassValue; next?: ClassValue; last?: ClassValue; }

Slots

Slot Type
firstobject
prevobject
nextobject
lastobject
ellipsis{ pohon: object; }
item{ page: number; pageCount: number; item: { type: "ellipsis"; } | { type: "page"; value: number; }; index: number; }

Emits

Event Type
update:page[value: number]

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PPagination. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts
export default defineAppConfig({
  pohon: {
    pagination: {
      slots: {
        root: '',
        list: '',
        ellipsis: '',
        label: '',
        first: '',
        prev: '',
        item: '',
        next: '',
        last: ''
      }
    }
  }
};
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    pagination: {
      slots: {
        root: '',
        list: '',
        ellipsis: '',
        label: '',
        first: '',
        prev: '',
        item: '',
        next: '',
        last: ''
      }
    }
  }
};

Akar

With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.

If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.

Changelog

No recent changes

NavigationMenu

A list of links that can be displayed horizontally or vertically.

Stepper

A set of steps that are used to indicate progress through a multi-step process.