Pagination

Demos

How to import

<script setup lang="ts">
    import { Pagination } from '@fibrous/semi-ui-vue';
</script>

Basic Usage

Set the total number via total, set capacity per page via pageSize.

<script setup lang="ts">
    import { Pagination } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Pagination :style="{ marginBottom: '12px' }" :total="30" />
        <Pagination :style="{ marginBottom: '12px' }" :total="80" />
        <Pagination :style="{ marginBottom: '12px' }" :total="200" />
        <Pagination :pageSize="30" :style="{ marginBottom: '12px' }" :total="80" />
    </div>
</template>

disabled

Disabled via the disabled setting

<script setup lang="ts">
    import { Pagination } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Pagination disabled :style="{ marginBottom: '12px' }" :total="30" />
</template>

Show total page number

Use the showTotal property to control whether the total number of pages is shown.

<script setup lang="ts">
    import { Pagination } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Pagination showTotal style="margin-bottom: 12px" :total="80" />
        <Pagination showTotal style="margin-bottom: 12px" :total="200" />
    </div>
</template>

Specify current page number

You can specify the currently active page number via defaultCurrentPage.

<script setup lang="ts">
    import { Pagination } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Pagination :defaultCurrentPage="3" showTotal :total="80" />
    </div>
</template>

Capacity switching per page

By setting showSizeChanger for true, allowing quick switching of capacity per page via the Select component

<script setup lang="ts">
    import { Pagination } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Pagination showSizeChanger style="margin-bottom: 12px" :total="80" />
        <Pagination showSizeChanger :total="300" />
    </div>
</template>

Jump to a page quickly

By setting showQuickJumper to true, you can enter the page number through the Input control to quickly jump
When Input loses focus, if there is a valid number in Input, it will jump directly. You can also enter the page number you want to jump to when the Input is focused, and then hit enter to jump directly
If you enter a page number greater than the total page number of the pager, we will automatically jump to the last page for you

<script setup lang="ts">
    import { Pagination } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Pagination showQuickJumper style="margin-bottom: 12px" :total="80" />
        <Pagination showQuickJumper :total="300" />
    </div>
</template>

Page number controlled

Bind the page number with v-model:currentPage and the pager is a controlled component: the current active page number depends entirely on the bound value. You can also pass only currentPage and update it yourself from @pageChange.

<script setup lang="ts">
    import { ref } from 'vue';
    import { Pagination } from '@fibrous/semi-ui-vue';

    const page = ref(3);
</script>

<template>
    <Pagination v-model:currentPage="page" :total="200" />
</template>

Preset capacity per page

Specify an optional value for switching the capacity per page by using the pageSizeOpts array

<script setup lang="ts">
    import { Pagination } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Pagination :pageSizeOpts="[50, 80, 90, 200]" showSizeChanger style="margin-bottom: 12px" :total="300" />
        <Pagination :pageSizeOpts="[10, 20, 50, 200]" showSizeChanger :total="300" />
    </div>
</template>

Mini version

Show mini pagination via size properties.

<script setup lang="ts">
    import { Pagination } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Pagination size="small" :total="90" />
</template>

Turn on hoverShowPageSelect to open the page list by hovering the page text and switch pages quickly

<script setup lang="ts">
    import { Pagination } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Pagination hoverShowPageSelect size="small" :total="90" />
</template>

API reference

Props

Events

Slots

Exposes

class, style and native attributes (id, aria-*, data-*, event listeners) fall through attrs onto the root ul, for both the default and the small size. change is a declared component event, so @change receives only the page and the page size, never the native change event bubbling up from the quick jump input. A template ref gives the component instance; the root element is its $el.

Accessibility

Pagination follows the common practice of the WAI-ARIA navigation example.

ARIA

• The root is a ul, and every part (total, previous, pages, next, page size, quick jumper) is an li in it
• Previous, next, the pages and "…" are native buttons. A page is named "Page N", "…" is named "More", and previous and next are named by the locale by default; with prevText or nextText (slots of the same name in Vue) holding plain text they are named by that text, while icons, elements and other content keep the locale name
• The button of the current page has aria-current="page"; disabled buttons use the native disabled
• The quick jumper input is named "Jump to" and is disabled when there are fewer than 2 pages
• The component itself is not a navigation landmark. When the pagination is a main way to navigate the page, wrap it in a <nav aria-label="..."> and tell multiple paginations on the page apart by their names

Keyboard and Focus

• Previous, next, the pages and "…" can be focused with Tab, and Enter or Space turns the page;
• Keyboard focus on "…", or on the page text in small mode with hoverShowPageSelect, opens the list of the omitted pages:
  • Down Arrow focuses the first page in the list, Up Arrow focuses the last one;
  • Tab and Shift + Tab move in the list, Enter or Space jumps to the page;
  • Esc closes the list and returns focus to the trigger button.

Design Tokens