Pagination

Pagination은 콘텐츠나 데이터를 여러 페이지로 나누고, 사용자가 이전 또는 다음 페이지로 이동할 수 있게 돕는 컨트롤입니다. 현재 위치를 표시하여, 사용자가 혼란 없이 필요한 정보를 쉽게 찾아볼 수 있도록 합니다.

Anatomy

  • Number

    anatomy

    • Previous
    • Next
    • Page navigation

  • Dot

    anatomy

    • Active dot
    • Inactive dot

Spec

  • State

    State

    사용자의 편의를 위해 첫 페이지와 마지막 페이지 번호를 표시합니다. 현재 페이지는 사용자가 쉽게 인식할 수 있도록 Gray700 색상으로 표기하며, 최대 7개의 페이지 번호를 노출합니다.

  • Size

    Size

    사이즈는 임의로 변경할 수 없습니다. font-text-m-400을 사용하며, 각 영역은 24, 간격은 8로 설정합니다.

  • Spacing

    Spacing

    리스트 콘텐츠에는 Gray 300/1px 라인을 사용하며, 상단 20, 하단 30의 여백을 설정합니다.

Usage

Do

Do

모바일 환경에서는 Number pagination이 아닌 더보기 버튼 형태를 사용합니다.

Don’t

Don’t

콘텐츠 하단에 위치할 경우 중앙 정렬하여 사용합니다.

© KYOBO BOOK CENTRE교보문고 바로가기