Vitral 0.2
Dados

Paginator

Navega pelas páginas de um conjunto de dados, com botões de primeira, anterior, numeradas, próxima e última, e escolha de linhas por página.

Testado com WAI-ARIA

Importação

main.ts
import { Paginator } from '@vitral/vue';

Básico

120 registros, dez por página, com escolha do tamanho da página.

first = 0, rows = 10
<script setup lang="ts">import { Paginator, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const first = ref(0);const rows = ref(10);const lastEvent = ref('');</script> <template>    <StackPanel spacing="1rem" style="width: 100%">        <Paginator            v-model:first="first"            v-model:rows="rows"            :total-records="120"            :rows-per-page-options="[10, 20, 50]"            @page="lastEvent = `page ${$event.page + 1} of ${$event.pageCount}, first row ${$event.first}`"        />        <small style="color: var(--vt-text-muted-color)">first = {{ first }}, rows = {{ rows }}{{ lastEvent ? ` — ${lastEvent}` : '' }}</small>    </StackPanel></template>

Relatório da página atual

O relatório segue o locale (`pageReport`); um template seu pode dizê-lo de outro jeito.

<script setup lang="ts">import { Paginator, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const first = ref(40);const rows = ref(20);</script> <template>    <StackPanel spacing="1rem" style="width: 100%">        <Paginator            v-model:first="first"            v-model:rows="rows"            :total-records="1287"            template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown"            :rows-per-page-options="[20, 50, 100]"        />        <Paginator v-model:first="first" v-model:rows="rows" :total-records="1287" template="PrevPageLink PageLinks NextPageLink CurrentPageReport" current-page-report-template="Page {page} of {pageCount}" :page-link-size="7" />    </StackPanel></template>

Conteúdo no início e no fim

<script setup lang="ts">import { Paginator, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const first = ref(0);</script> <template>    <StackPanel spacing="1rem" style="width: 100%">        <Paginator v-model:first="first" :rows="25" :total-records="340" template="PrevPageLink PageLinks NextPageLink" :page-link-size="3">            <template #start="{ page, pageCount }">                <small style="color: var(--vt-text-muted-color)">Invoices · page {{ page + 1 }} of {{ pageCount }}</small>            </template>            <template #end>                <small style="color: var(--vt-text-muted-color)">340 invoices</small>            </template>        </Paginator>    </StackPanel></template>

API

Lido de packages/vue/src/components/Paginator/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
totalRecordsnumberLinhas no conjunto inteiro de dados, somando as páginas.
rowsPerPageOptionsnumber[]Opções para o select de linhas por página; sem elas, ele é omitido.
pageLinkSizenumberQuantos links de página mostrar em torno da atual.
templatePaginatorTemplateItem[] | stringAs peças a renderizar, em ordem: uma lista, ou uma string separada por espaços.
currentPageReportTemplatestring`{first}`, `{last}`, `{total}`, `{page}`, `{pageCount}`, `{rows}`. O padrão é o `pageReport` do locale.
alwaysShowbooleanRenderiza mesmo quando tudo cabe numa página.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
pageevent: PaginatorPageEvent—

Slots

NomeProps do slotDescrição
start(props: PaginatorPageEvent)Conteúdo antes dos controles: um resumo, um botão de exportar.
end(props: PaginatorPageEvent)Conteúdo depois dos controles.