Komponent

FPaginateDataset FPaginator

Status

Produktionsklar

Hur används komponenten?

Paginering används för att låta användaren navigera mellan innehåll som är uppdelat på flera sidor. Innehållet kan till exempel vara sökresultat eller tabeller.

Tänk på att

• Fundera på hur många objekt som ska visas på en sida så att det blir optimalt för användaren.
• Om du kombinerar paginering med tabell kan vissa funktioner i tabell skapa oönskade beteenden vid paginering.

Responsivitet

Paginering visar sidor som standard tillsammans med knappar för föregående och nästa sida, se exempel nedan. När fönstret blir smalare och paginering inte får plats ersätts sidorna med en text som visar vilken sida användaren befinner sig på, se exempel överst.

<script lang="ts">
import { defineComponent } from "vue";
import { FPaginateDataset, FPaginator } from "@fkui/vue";

export default defineComponent({
    components: {
        FPaginateDataset,
        FPaginator,
    },
    data() {
        return {
            rows: Array.from({ length: 100 }),
        };
    },
});
</script>

<template>
    <f-paginate-dataset :items="rows" :itemsPerPage="1">
        <template #default="{ items: currentPageItems }">
            <f-paginator />
        </template>
    </f-paginate-dataset>
</template>

Hämtning av data

Om du inte har tillgång till hela datamängden direkt kan du använda dynamisk hämtning av data. Då hämtar du bara den data som ska visas på aktuell sida. Använd attributen itemsLength och fetchData. Med attributet itemsLength anger du hur stor den totala datamängden är och som kommer ligga till grund för siduppdelning. Attributet fetchData anger den funktion som ska användas för hämtning av det data ska visas på aktuell sida.

async function fetchData(first: number, last: number) {
    await new Promise((resolve) => setTimeout(resolve, 3000));
    return persons.slice(first, last);
}

Textnycklar

Läs mer om att anpassa och översätta text.

fkui.paginator.defaultNavigatorLabel

Default ARIA label for navigator.

Default: "Navigera mellan sidor"

fkui.paginator.next

"Next" button.

Default: "Nästa"

fkui.paginator.previous

"Previous" button.

Default: "Föregående"

fkui.paginator.page-counter-aria

Page counter (shown for screen readers).

Default: "Sida {{ currentPage }} av {{ numberOfPages }}"

Parameters:

• currentPage — The current page number.
• numberOfPages — The total number of pages.

fkui.paginator.page-counter

Page counter.

Default: "{{ currentPage }} av {{ numberOfPages }}"

Parameters:

• currentPage — The current page number.
• numberOfPages — The total number of pages.

fkui.paginator.page-label

ARIA label for page button.

Default: "Sida {{ page }}"

Parameters:

• page — The page number.

API

FPaginateDataset

Props

items: Array Optional

The items to be used. The items will be used in the given array order.

itemsPerPage: number Optional

The number of items per page (at most).

itemsLength: number Optional

The number of items to be used.

Used together with fetchData.

Slots

default

Slot for the page.

Bindings:

• items: T[] — The items on the current page.
• numberOfItems: number — The number of items on the current page.
• currentPage: number — The number of the current page.
• firstItemIndex: number — The index of the first item on the current page.
• lastItemIndex: number — The index of the last item on the current page.
• numberOfPages: number — The number of pages.

FPaginator

Props

numberOfPages: number Optional

The number of pages available.

currentPage: number Optional

The number of the current page.

numberOfPagesToShow: number Optional

The number of pages to show in the paginator (at most).

navigatorLabel: string Optional

The label for the navigator. If the prop is not set the value of the text key fkui.paginator.defaultNavigatorLabel will be used.