Pagination

Pagination은 콘텐츠를 페이지 단위로 탐색할 수 있도록 돕는 네비게이션 컴포넌트입니다.

Property

Sibling Count

Pagination에서 현재 페이지 주변에 표시할 페이지 번호의 개수를 설정합니다.

Boundary Count

Pagination의 시작과 끝에 항상 표시할 페이지 번호의 개수를 설정합니다.

Disabled

Pagination 버튼들의 비활성화 여부를 결정하는 옵션입니다.

Size

Pagination의 크기를 설정합니다.

Examples

Controlled

Pagination 컴포넌트를 제어 컴포넌트로 사용하는 예시입니다.

Props Table


Pagination.Root

Combines Pagination.RootPrimitive and Pagination.ListPrimitive into a single part, the root of a pagination control that lets users move between pages of content. Renders a <nav> element.

PropDefaultType
totalPages
-
number
size?
md
smmdlgxl
onPageChange?
-
function
boundaryCount?
-
number
className?
-
stringfunction
defaultPage?
-
number
disabled?
-
boolean
page?
-
number
siblingCount?
-
number
style?
-
React.CSSPropertiesfunction
render?
-
ReactElementfunction

Pagination.RootPrimitive

Navigation landmark labeled "Pagination" that manages the selected page and shares size and disabled with the parts inside it. Renders a <nav> element.

PropDefaultType
totalPages
-
number
size?
md
smmdlgxl
onPageChange?
-
function
boundaryCount?
1
number
className?
-
stringfunction
defaultPage?
1
number
disabled?
false
boolean
page?
-
number
siblingCount?
2
number
style?
-
React.CSSPropertiesfunction
render?
-
ReactElementfunction

Pagination.ListPrimitive

Ordered list that lays out the pagination items in a row. Renders an <ol> element.

PropDefaultType
className?
-
stringfunction
style?
-
React.CSSPropertiesfunction
render?
-
ReactElementfunction

Pagination.Items

Generates a page button for each visible page and an ellipsis for each skipped range, based on totalPages, siblingCount, and boundaryCount of the root. Place it between Pagination.Previous and Pagination.Next. Doesn't render its own HTML element.

PropDefaultType
children?
-
ReactNodefunction

Pagination.ItemPrimitive

List item that holds one pagination control, such as a page button or an ellipsis. Renders an <li> element.

PropDefaultType
className?
-
stringfunction
style?
-
React.CSSPropertiesfunction
render?
-
ReactElementfunction

Pagination.ButtonPrimitive

Button that selects the page set in page when clicked, highlighted while that page is selected. Renders a <button> element.

PropDefaultType
page
-
number
className?
-
stringfunction
style?
-
React.CSSPropertiesfunction
render?
-
ReactElementfunction

Pagination.EllipsisPrimitive

Icon that stands in for skipped pages, hidden from assistive technologies. Renders a <span> element.

PropDefaultType
children?
-
ReactNode
className?
-
stringfunction
style?
-
React.CSSPropertiesfunction
render?
-
ReactElementfunction

Pagination.Previous

Combines Pagination.ItemPrimitive and Pagination.PreviousPrimitive into a single part. Renders a <button> element inside an <li> element.

PropDefaultType
children?
-
ReactNode
className?
-
stringfunction
style?
-
React.CSSPropertiesfunction
render?
-
ReactElementfunction

Pagination.PreviousPrimitive

Button that moves to the previous page when clicked, disabled on the first page. Renders a <button> element.

PropDefaultType
children?
-
ReactNode
className?
-
stringfunction
style?
-
React.CSSPropertiesfunction
render?
-
ReactElementfunction

Pagination.Next

Combines Pagination.ItemPrimitive and Pagination.NextPrimitive into a single part. Renders a <button> element inside an <li> element.

PropDefaultType
children?
-
ReactNode
className?
-
stringfunction
style?
-
React.CSSPropertiesfunction
render?
-
ReactElementfunction

Pagination.NextPrimitive

Button that moves to the next page when clicked, disabled on the last page. Renders a <button> element.

PropDefaultType
children?
-
ReactNode
className?
-
stringfunction
style?
-
React.CSSPropertiesfunction
render?
-
ReactElementfunction

On this page