Pagination
Pagination은 콘텐츠를 페이지 단위로 탐색할 수 있도록 돕는 네비게이션 컴포넌트입니다.Property
Sibling Count
Pagination에서 현재 페이지 주변에 표시할 페이지 번호의 개수를 설정합니다.
Boundary Count
Pagination의 시작과 끝에 항상 표시할 페이지 번호의 개수를 설정합니다.
Disabled
Pagination 버튼들의 비활성화 여부를 결정하는 옵션입니다.
Size
Pagination의 크기를 설정합니다.
Examples
Controlled
Pagination 컴포넌트를 제어 컴포넌트로 사용하는 예시입니다.
Pagination.Root
Pagination.RootPrimitive와 Pagination.ListPrimitive를 하나의 파트로 합칩니다. 사용자가 콘텐츠 페이지 사이를 이동하는 페이지네이션 컨트롤의 루트이며, <nav> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
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
"Pagination" 레이블이 붙은 탐색 랜드마크. 선택된 페이지를 관리하고 size와 disabled를 내부 파트에 공유합니다. <nav> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
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
페이지네이션 항목을 한 줄로 배치하는 순서 있는 목록. <ol> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Pagination.Items
루트의 totalPages, siblingCount, boundaryCount에 따라 보이는 각 페이지의 페이지 버튼과 건너뛴 각 범위의 줄임표를 생성합니다. Pagination.Previous와 Pagination.Next 사이에 배치하세요. 자체 HTML 요소를 렌더링하지 않습니다.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNodefunction |
Pagination.ItemPrimitive
페이지 버튼이나 줄임표처럼 페이지네이션 컨트롤 하나를 담는 목록 항목. <li> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Pagination.ButtonPrimitive
클릭하면 page에 설정된 페이지를 선택하는 버튼. 해당 페이지가 선택되어 있는 동안 강조됩니다. <button> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
page | - | number |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Pagination.EllipsisPrimitive
건너뛴 페이지를 대신하는 아이콘. 보조기술에서는 숨겨집니다. <span> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Pagination.Previous
Pagination.ItemPrimitive와 Pagination.PreviousPrimitive를 하나의 파트로 합칩니다. <li> 요소 안에 <button> 요소를 렌더링합니다.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Pagination.PreviousPrimitive
클릭하면 이전 페이지로 이동하는 버튼. 첫 페이지에서는 비활성화됩니다. <button> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Pagination.Next
Pagination.ItemPrimitive와 Pagination.NextPrimitive를 하나의 파트로 합칩니다. <li> 요소 안에 <button> 요소를 렌더링합니다.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Pagination.NextPrimitive
클릭하면 다음 페이지로 이동하는 버튼. 마지막 페이지에서는 비활성화됩니다. <button> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |