Paginasi

Penggunaan

Penggunaan Mudah

Komponen AutoPagination boleh digunakan terus untuk penggunaan mudah. Komponen ini boleh digunakan untuk tujuan paginasi lazim.

import { AutoPagination } from "@govtechmy/myds-react/pagination";

<AutoPagination />

Penggunaan Lanjutan

Sebagai alternatif kepada komponen AutoPagination, fungsi paginasi masih dapat dilaksanakan dengan kombinasi subkomponen: Pagination, PaginationItem, PaginationContent, PaginationEllipsis, PaginationNext, PaginationPrevious dan PaginationNumber.

import {
  Pagination,
  PaginationContext,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationNext,
  PaginationNumber,
  PaginationPrevious,
} from "@/components/myds";

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious />
    </PaginationItem>
    <PaginationItem>
      <PaginationNumber />
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Contoh

Jenis AutoPagination

Gunakan props type untuk menukar jenis komponen AutoPagination. Contoh penggunaan untuk setiap jenis adalah seperti berikut:

1. default: Sesuai untuk keadaan di mana pengguna mungkin ingin melompat ke halaman tertentu dalam jumlah halaman yang banyak.
2. simple: Sesuai untuk navigasi yang lebih mudah di mana pengguna hanya bergerak ke muka surat sebelum atau selepas.
3. full: Serupa dengan jenis simple, jenis ini memaparkan halaman semasa dan jumlah halaman di sebelah kiri berserta butang navigasi di sebelah kanan.

Konfigurasi Paginasi

Penggunaan AutoPagination atau pemasangan manual subkomponen paginasi memerlukan penggunaan prop seperti page, limit dan count. Fungsi dan rupa komponen paginasi akan dipengaruhi oleh prop-prop tersebut.

Props

AutoPagination

Komponen paginasi yang mengendalikan navigasi halaman. Komponen ini sudah disiap pasang dan boleh digunakan terus untuk fungsi paginasi mudah.

Pagination

Komponen container yang menyediakan struktur navigasi melalui elemen nav.

PaginationContent

Komponen yang dirender sebagai elemen ul yang bertujuan untuk menyusun PaginationItem dalam arah mendatar.

PaginationItem

Komponen yang dirender sebagai elemen li yang mengandungi elemen seperti PaginationNext, PaginationPrevious, PaginationLabel dan PaginationEllipsis.

PaginationNext

Komponen button yang mengendalikan navigasi ke halaman seterusnya. Komponen lalai tersebut boleh digantikan dengan menggunakan props asChild.

PaginationPrevious

Komponen button yang mengendalikan navigasi ke halaman sebelumnya. Komponen lalai tersebut boleh digantikan dengan menggunakan props asChild.

PaginationLabel

Komponen teks yang memaparkan maklumat paginasi.

PaginationEllipsis

Komponen penunjuk visual yang mewakili nombor halaman yang dilangkau dalam urutan pagination.