Flux

Pagination ​

A component that displays the pages for paginated content. The component automatically decides which pages to show or not.

Ellipsis behavior

Hidden pages are collapsed into a non-interactive ellipsis (…), which is hidden from assistive technologies via aria-hidden. A gap is only collapsed when at least two pages are hidden; a single hidden page is rendered directly, since an ellipsis would take up the same space as the page it replaces. In compact mode the current page button is labelled for screen readers so its purpose stays clear.

Required icons

angle-left
angle-right

Props

arrows?: boolean
If the navigation arrows should be enabled.

is-compact?: boolean
If the pagination should be compact.

page: number
The current page.

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

total: number
The total number of items.

Emits

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

Examples ​

Basic

A basic pagination.

Currently displaying page 1.

<template>
    <FluxPane>
        <FluxPaneBody>
            <p>Currently displaying page <strong>{{ page }}</strong>.</p>
        </FluxPaneBody>

        <FluxPaneFooter>
            <FluxPagination
                arrows
                :total="200"
                :page="page"
                :per-page="10"
                @navigate="page = $event"/>
        </FluxPaneFooter>
    </FluxPane>
</template>

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

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

Compact

A compact pagination.

Currently displaying page 1.

<template>
    <FluxPane>
        <FluxPaneBody>
            <p>Currently displaying page <strong>{{ page }}</strong>.</p>
        </FluxPaneBody>

        <FluxPaneFooter>
            <FluxPagination
                arrows
                is-compact
                :total="200"
                :page="page"
                :per-page="10"
                @navigate="page = $event"/>
        </FluxPaneFooter>
    </FluxPane>
</template>

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

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

Used components ​