Pagination

Demos

How to import

<script lang="ts">
    import { Pagination } from '@fibrae/semi-ui-svelte';
</script>

Basic Usage

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

<script lang="ts">
    import { Pagination } from '@fibrae/semi-ui-svelte';
</script>

<div>
    <Pagination style="margin-bottom: 12px" total={30} />
    <Pagination style="margin-bottom: 12px" total={80} />
    <Pagination style="margin-bottom: 12px" total={200} />
    <Pagination pageSize={30} style="margin-bottom: 12px" total={80} />
</div>

disabled

Disabled via the disabled setting

<script lang="ts">
    import { Pagination } from '@fibrae/semi-ui-svelte';
</script>

<Pagination disabled style="margin-bottom: 12px" total={30} />

Show total page number

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

<script lang="ts">
    import { Pagination } from '@fibrae/semi-ui-svelte';
</script>

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

Specify current page number

There is no defaultCurrentPage: pass currentPage={3} as the initial page. After a click the page becomes a local value of the component.

<script lang="ts">
    import { Pagination } from '@fibrae/semi-ui-svelte';
</script>

<div>
    <Pagination currentPage={3} showTotal total={80} />
</div>

Capacity switching per page

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

<script lang="ts">
    import { Pagination } from '@fibrae/semi-ui-svelte';
</script>

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

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 lang="ts">
    import { Pagination } from '@fibrae/semi-ui-svelte';
</script>

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

Page number controlled

Bind the page with bind:currentPage; bind:currentPage={get, set} makes the pagination fully controlled, and the setter decides whether to accept a new page. When currentPage is omitted the component manages the page itself.

<script lang="ts">
    import { Pagination } from '@fibrae/semi-ui-svelte';

    let page = $state(3);
</script>

<Pagination bind:currentPage={page} total={200} />

Preset capacity per page

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

<script lang="ts">
    import { Pagination } from '@fibrae/semi-ui-svelte';
</script>

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

Mini version

Show mini pagination via size properties.

<script lang="ts">
    import { Pagination } from '@fibrae/semi-ui-svelte';
</script>

<Pagination size="small" total={90} />

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

<script lang="ts">
    import { Pagination } from '@fibrae/semi-ui-svelte';
</script>

<Pagination hoverShowPageSelect size="small" total={90} />

API reference

Props

class, style and native attributes and events (such as id, aria-*, data-*, onclick) land on the root ul, for both the default and the small size; onChange, onPageChange and onPageSizeChange are component callbacks and do not land on the root element.

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