Flux

Appearance

Pagination ​

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

Required icons

angle-left
angle-right
ellipsis-h

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 ​