Skip to content
Docs

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Pagination, PaginationWithInfo } from "@hua-labs/hua";

...

: 1

......

: 5

...

: 1

...

: 3

Small
Medium
Large

1 - 10 of 100 results
...

currentPage*number-docs:components.pagination.props.currentPage
totalPages*number-docs:components.pagination.props.totalPages
onPageChange*(page: number) => void-docs:components.pagination.props.onPageChange
variant"default" | "outlined" | "minimal""default"docs:components.pagination.props.variant
size"sm" | "md" | "lg""md"docs:components.pagination.props.size
shape"square" | "circle""square"docs:components.pagination.props.shape
showFirstLastbooleantruedocs:components.pagination.props.showFirstLast
showPrevNextbooleantruedocs:components.pagination.props.showPrevNext
maxVisiblePagesnumber5docs:components.pagination.props.maxVisiblePages

docs:common.basicUsagetsx
1import { Pagination } from '@hua-labs/hua';
2import { useState } from 'react';
3 
4const [page, setPage] = useState(1);
5 
6<Pagination
7  currentPage={page}
8  totalPages={10}
9  onPageChange={setPage}
10/>
docs:components.pagination.examples.variantstsx
1// Default
2<Pagination currentPage={page} totalPages={10} onPageChange={setPage} />
3 
4// Outlined
5<Pagination variant="outlined" currentPage={page} totalPages={10} onPageChange={setPage} />
6 
7// Minimal
8<Pagination variant="minimal" currentPage={page} totalPages={10} onPageChange={setPage} />
docs:components.pagination.examples.circletsx
1<Pagination
2  currentPage={page}
3  totalPages={10}
4  onPageChange={setPage}
5  shape="circle"
6/>
docs:components.pagination.examples.withInfotsx
1import { PaginationWithInfo } from '@hua-labs/hua';
2 
3<PaginationWithInfo
4  currentPage={page}
5  totalPages={10}
6  onPageChange={setPage}
7  totalItems={100}
8  itemsPerPage={10}
9/>

  • PaginationWithInfo -
  • PaginationOutlined -
  • PaginationMinimal -

  • •docs:components.pagination.accessibility.ariaCurrent: docs:components.pagination.accessibility.ariaCurrentDesc
  • •docs:components.pagination.accessibility.ariaLabels: docs:components.pagination.accessibility.ariaLabelsDesc
  • •docs:components.pagination.accessibility.keyboard: docs:components.pagination.accessibility.keyboardDesc
BreadcrumbPageNavigation