Pagination

A navigation component with buttons or links for pagination.

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>
  <B24Pagination v-model:page="page" :total="100" />
</template>

The Pagination component uses some Button to display the pages, use color and size props to style them.

Total

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

page

total

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

<template>
  <B24Pagination 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.

itemsPerPage

total

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

<template>
  <B24Pagination 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.

siblingCount

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

<template>
  <B24Pagination 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.

showEdges

siblingCount

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

<template>
  <B24Pagination 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.

showControls

showEdges

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

<template>
  <B24Pagination 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 air-secondary-no-accent.

color

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

<template>
  <B24Pagination v-model:page="page" color="air-tertiary-no-accent" :total="100" />
</template>

Active Color

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

activeColor

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

<template>
  <B24Pagination v-model:page="page" active-color="air-primary-copilot" :total="100" />
</template>

Size

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

size

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

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

Disabled

Use the disabled prop to disable the pagination controls.

disabled

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

<template>
  <B24Pagination 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">
const page = ref(5)

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

<template>
  <B24Pagination 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.
`firstIcon`	`icons.chevronDoubleLeft`	`IconComponent` The icon to use for the first page control.
`prevIcon`	`icons.chevronLeft`	`IconComponent` The icon to use for the previous page control.
`nextIcon`	`icons.chevronRight`	`IconComponent` The icon to use for the next page control.
`lastIcon`	`icons.chevronDoubleRight`	`IconComponent` The icon to use for the last page control.
`ellipsisIcon`	`icons.ellipsis`	`IconComponent` The icon to use for the ellipsis control.
`color`	`'air-secondary-no-accent'`	`"air-primary" \| "air-primary-success" \| "air-primary-alert" \| "air-primary-copilot" \| "air-secondary" \| "air-secondary-alert" \| "air-secondary-accent" \| "air-secondary-accent-1" \| "air-secondary-accent-2" \| "air-secondary-no-accent" \| "air-tertiary" \| "air-tertiary-accent" \| "air-tertiary-no-accent" \| "air-selection" \| "air-boost" \| "link"` The color of the pagination controls.
`activeColor`	`'air-primary'`	`"air-primary" \| "air-primary-success" \| "air-primary-alert" \| "air-primary-copilot" \| "air-secondary" \| "air-secondary-alert" \| "air-secondary-accent" \| "air-secondary-accent-1" \| "air-secondary-accent-2" \| "air-secondary-no-accent" \| "air-tertiary" \| "air-tertiary-accent" \| "air-tertiary-no-accent" \| "air-selection" \| "air-boost" \| "link"` The color of the active pagination control.
`showControls`	`true`	`boolean` Whether to show the first, previous, next, and last controls.
`size`		`"xs" \| "md" \| "xss" \| "sm" \| "lg" \| "xl"`
`to`		`(page: number): string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric` A function to render page controls as links.
`defaultPage`		`number` The value of the page that should be active when initially rendered. Use when you do not need to control the value state.
`disabled`		`boolean` When `true`, prevents the user from interacting with item
`itemsPerPage`	`10`	`number` Number of items per page
`page`		`number` The controlled value of the current page. Can be binded as `v-model:page`.
`showEdges`	`false`	`boolean` When `true`, always show first page, last page, and ellipsis
`siblingCount`	`2`	`number` Number of sibling should be shown around the current page
`total`	`0`	`number` Number of items in your list
`b24ui`		`{ root?: ClassNameValue; list?: ClassNameValue; ellipsis?: ClassNameValue; label?: ClassNameValue; first?: ClassNameValue; prev?: ClassNameValue; item?: ClassNameValue; next?: ClassNameValue; last?: ClassNameValue; }`

Slots

Slot	Type
`first`	`{}`
`prev`	`{}`
`next`	`{}`
`last`	`{}`
`ellipsis`	`{ b24ui: object; }`
`item`	`{ page: number; pageCount: number; item: { type: "ellipsis"; } \| { type: "page"; value: number; }; index: number; }`

Emits

Event	Type
`update:page`	`[value: number]`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    pagination: {
      slots: {
        root: '',
        list: 'flex items-center gap-1',
        ellipsis: 'pointer-events-none',
        label: 'text-center',
        first: '',
        prev: '',
        item: '',
        next: '',
        last: ''
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        pagination: {
          slots: {
            root: '',
            list: 'flex items-center gap-1',
            ellipsis: 'pointer-events-none',
            label: 'text-center',
            first: '',
            prev: '',
            item: '',
            next: '',
            last: ''
          }
        }
      }
    })
  ]
})

NavigationMenu

A link list that can be arranged in horizontal or vertical orientation.

Stepper

A stepper component to visualize progress in a multistep workflow.