Pagination
Pagination
Pagination
Pagination은 페이지 간 이동을 위한 내비게이션 컴포넌트입니다. 이전/다음 버튼과 페이지 번호 버튼을 통해 사용자가 콘텐츠를 효율적으로 탐색할 수 있도록 돕습니다.
Pagination
Pagination은 페이지 간 이동을 위한 내비게이션 컴포넌트입니다. 이전/다음 버튼과 페이지 번호 버튼을 통해 사용자가 콘텐츠를 효율적으로 탐색할 수 있도록 돕습니다.
Pagination
Pagination은 페이지 간 이동을 위한 내비게이션 컴포넌트입니다. 이전/다음 버튼과 페이지 번호 버튼을 통해 사용자가 콘텐츠를 효율적으로 탐색할 수 있도록 돕습니다.
Anatomy
ESSENTIAL
1. 첫 페이지 버튼
첫 페이지로 이동하는 버튼입니다. 현재 페이지가 첫 페이지인 경우 비활성 상태로 표시됩니다.
2. 페이지 버튼
각 페이지 번호를 나타내는 버튼입니다. 페이지 번호는 연속적으로 표시되며, 현재 위치는 시각적으로 구분됩니다.
3. 페이지 이동 버튼
현재 페이지를 기준으로 한 단계 이전 또는 다음 페이지로 이동하는 버튼입니다. 첫 페이지에서는 다음 버튼만 노출되며, 2페이지 이상부터 이전 버튼이 함께 표시됩니다.
4. 마지막 페이지 버튼
마지막 페이지로 이동하는 버튼입니다. 현재 페이지가 마지막 페이지인 경우 비활성 상태로 표시됩니다.
Anatomy
ESSENTIAL
1. 첫 페이지 버튼
첫 페이지로 이동하는 버튼입니다. 현재 페이지가 첫 페이지인 경우 비활성 상태로 표시됩니다.
2. 페이지 버튼
각 페이지 번호를 나타내는 버튼입니다. 페이지 번호는 연속적으로 표시되며, 현재 위치는 시각적으로 구분됩니다.
3. 페이지 이동 버튼
현재 페이지를 기준으로 한 단계 이전 또는 다음 페이지로 이동하는 버튼입니다. 첫 페이지에서는 다음 버튼만 노출되며, 2페이지 이상부터 이전 버튼이 함께 표시됩니다.
4. 마지막 페이지 버튼
마지막 페이지로 이동하는 버튼입니다. 현재 페이지가 마지막 페이지인 경우 비활성 상태로 표시됩니다.
Anatomy
ESSENTIAL
1. 첫 페이지 버튼
첫 페이지로 이동하는 버튼입니다. 현재 페이지가 첫 페이지인 경우 비활성 상태로 표시됩니다.
2. 페이지 버튼
각 페이지 번호를 나타내는 버튼입니다. 페이지 번호는 연속적으로 표시되며, 현재 위치는 시각적으로 구분됩니다.
3. 페이지 이동 버튼
현재 페이지를 기준으로 한 단계 이전 또는 다음 페이지로 이동하는 버튼입니다. 첫 페이지에서는 다음 버튼만 노출되며, 2페이지 이상부터 이전 버튼이 함께 표시됩니다.
4. 마지막 페이지 버튼
마지막 페이지로 이동하는 버튼입니다. 현재 페이지가 마지막 페이지인 경우 비활성 상태로 표시됩니다.
State
State
State
Properties
Size | L, S |
State | default, hover |
Position | start, middle, end |
Properties
Size | L, S |
State | default, hover |
Position | start, middle, end |
Properties
Size | L, S |
State | default, hover |
Position | start, middle, end |
Spec
 |
|
 | Alignment4페이지 이상부터 선택된 페이지가 항상 가운데 위치하게 됩니다. |
Spec
Width
1–2자리 페이지 번호는 동일한 너비를 사용합니다. 3자리 이상부터는 숫자 길이에 따라 버튼 너비가 유동적으로 확장됩니다.
Alignment
4페이지 이상부터 선택된 페이지가 항상 가운데 위치하게 됩니다. 클릭 위치를 유지해서 사용성을 높입니다.
Spec
|
|
| Alignment4페이지 이상부터 선택된 페이지가 항상 가운데 위치하게 됩니다. |
Usage
Do
페이지네이션은 콘텐츠 영역 하단에 배치하며, 기본적으로 중앙 정렬을 권장합니다.
Don't
첫 페이지에서는 First 버튼을 표시하지 않습니다.
Usage
Do
페이지네이션은 콘텐츠 영역 하단에 배치하며, 기본적으로 중앙 정렬을 권장합니다.
Don't
첫 페이지에서는 First 버튼을 표시하지 않습니다.
Usage
Do
페이지네이션은 콘텐츠 영역 하단에 배치하며, 기본적으로 중앙 정렬을 권장합니다.
Don't
첫 페이지에서는 First 버튼을 표시하지 않습니다.