Get Started

Components

accordion alert avatar breadcrumb button checkbox dropdown input label modal pagination radio select sheet skeleton switch table textarea toast

Pagination

Pagination with page navigation, next and previous links.

code

Expend code


    <Pagination
      showingPages={5}
      totalPages={20}
      currentPage={currentPage1}
      onPageChange={handlePageChange1}
    />


    <Pagination
      showingPages={5}
      totalPages={20}
      currentPage={currentPage1}
      onPageChange={handlePageChange1}
    />

#custom1

code

Expend code


    <Pagination
      showingPages={10}
      totalPages={20}
      currentPage={currentPage2}
      onPageChange={handlePageChange2}
      currentPageStyle="rounded-full"
    />


    <Pagination
      showingPages={10}
      totalPages={20}
      currentPage={currentPage2}
      onPageChange={handlePageChange2}
      currentPageStyle="rounded-full"
    />

#custom2

code

Expend code


    <Pagination
      showingPages={5}
      totalPages={20}
      currentPage={currentPage3}
      onPageChange={handlePageChange3}
      currentPageStyle="border-black rounded-sm"
      prevIcon={<ArrowBigLeft />}
      nextIcon={<ArrowBigRight />}
      startIcon={<ArrowBigLeftDash />}
      lastIcon={<ArrowBigRightDash />}
    />


    <Pagination
      showingPages={5}
      totalPages={20}
      currentPage={currentPage3}
      onPageChange={handlePageChange3}
      currentPageStyle="border-black rounded-sm"
      prevIcon={<ArrowBigLeft />}
      nextIcon={<ArrowBigRight />}
      startIcon={<ArrowBigLeftDash />}
      lastIcon={<ArrowBigRightDash />}
    />

Props

다음 속성을 사용하여 툴팁을 맞춤 설정할 수 있습니다.

Prop	Type	Default	Description
currentPage	number	-	Sets the currently selected page number.
totalPages	number	-	Specifies the total number of pages.
showingPages	number	-	Determines the number of page numbers to display at once.
onPageChange	(page: number) => void	-	Callback function called when the page number is changed.
currentPageStyle	string	border border-border rounded-lg	Defines the style for the currently selected page.
startIcon	React.ReactNode	<ChevronsLeft size={20} />	Specifies the icon used for the button that moves to the first page.
prevIcon	React.ReactNode	<ChevronLeft size={20} /> Previous	Specifies the icon used for the button that moves to the previous page.
nextIcon	React.ReactNode	Next <ChevronRight size={20} />	Specifies the icon used for the button that moves to the next page.
lastIcon	React.ReactNode	<ChevronsRight size={20} />	Specifies the icon used for the button that moves to the last page.