mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
36 lines
1.4 KiB
Plaintext
36 lines
1.4 KiB
Plaintext
---
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
|
|
import Pagination from '@ui/Pagination.astro'
|
|
import Card from '@ui/Card.astro'
|
|
import CardBody from '@ui/CardBody.astro'
|
|
import CardTitle from '@ui/CardTitle.astro'
|
|
import CardSubtitle from '@ui/CardSubtitle.astro'
|
|
import DocsLink from '@ui/DocsLink.astro'
|
|
---
|
|
|
|
<DefaultLayout title="Pagination" pageMenu="base.pagination" description="Pagination splits a long list of results into pages, with Prev/Next controls.">
|
|
<DocsLink slot="page-header-actions" path="/ui/components/pagination" />
|
|
|
|
<div class="row row-cards">
|
|
<div class="col-12">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Numbered</CardTitle>
|
|
<CardSubtitle>Page numbers, with or without Prev/Next text labels (<code>page-text</code>).</CardSubtitle>
|
|
<Pagination count={5} activeItem={3} />
|
|
<Pagination count={5} activeItem={3} text />
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
<div class="col-12">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>With descriptions</CardTitle>
|
|
<CardSubtitle>Name the adjacent page with <code>page-item-subtitle</code> for the direction and <code>page-item-title</code> for the page name.</CardSubtitle>
|
|
<Pagination count={0} prevDescription="Getting started" nextDescription="Breadcrumbs" />
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</DefaultLayout>
|