Pagination bar

The pagination bar displays information about the current page of data and allows the user to change how many items are shown per page.

1–10 of 100

Props

limits?: number[]
The different limits that are available.
Default: [ 5, 10, 25, 50, 100 ]

page: number
The current page.

per-page: number
The number of items per page.

total: number
The total number of items.

Emits

limit: [number]
Triggered when the limit is changed.

navigate: [number]
Triggered when a page change occurred.

Examples

Basic

A basic pagination bar.

Preview

1–10 of 100

Code

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxPaginationBar
                :page="1"
                :per-page="10"
                :total="100"/>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPaginationBar, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>

Used components

• Pagination
• Layout
  • Spacer
• Form
  • Select