페이지네이션

페이지네이션 (Pagination)

페이지네이션 컴포넌트는 여러 요소로 구성됩니다:

• pagination-previous와 pagination-next: 이전/다음 내비게이션
• pagination-list: 페이지 항목을 표시하는 목록
  • pagination-link: 페이지 번호
  • pagination-ellipsis: 범위 구분 기호

모든 요소는 선택 사항이므로, 원하는 대로 페이지네이션을 조합할 수 있어요.

출처: 문서

본문

<nav class="pagination" role="navigation" aria-label="pagination">
  <a href="#" class="pagination-previous">Previous</a>
  <a href="#" class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li>
      <a href="#" class="pagination-link" aria-label="Goto page 1">1</a>
    </li>
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    <li>
      <a href="#" class="pagination-link" aria-label="Goto page 45">45</a>
    </li>
    <li>
      <a
        class="pagination-link is-current"
        aria-label="Page 46"
        aria-current="page"
        >46</a
      >
    </li>
    <li>
      <a href="#" class="pagination-link" aria-label="Goto page 47">47</a>
    </li>
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    <li>
      <a href="#" class="pagination-link" aria-label="Goto page 86">86</a>
    </li>
  </ul>
</nav>

활성화되지 않은 일부 링크를 비활성화하거나, 표시되는 페이지 번호의 개수를 바꿀 수도 있어요.

<nav class="pagination" role="navigation" aria-label="pagination">
  <a class="pagination-previous is-disabled" title="This is the first page"
    >Previous</a
  >
  <a href="#" class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li>
      <a
        class="pagination-link is-current"
        aria-label="Page 1"
        aria-current="page"
        >1</a
      >
    </li>
    <li>
      <a href="#" class="pagination-link" aria-label="Goto page 2">2</a>
    </li>
    <li>
      <a href="#" class="pagination-link" aria-label="Goto page 3">3</a>
    </li>
  </ul>
</nav>

태블릿에서 기본적으로 목록은 왼쪽에, 이전/다음 버튼은 오른쪽에 위치합니다. 하지만 is-centered와 is-right 수식어를 사용해 이 요소들의 순서를 바꿀 수 있어요.

<nav class="pagination is-centered" role="navigation" aria-label="pagination">
  <a href="#" class="pagination-previous">Previous</a>
  <a href="#" class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li>
      <a
        class="pagination-link is-current"
        aria-label="Page 46"
        aria-current="page"
        >46</a
      >
    </li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

is-right 수식어로 오른쪽 정렬도 가능합니다.

스타일 (Styles)

is-rounded 수식어를 추가하면 둥근 페이지네이션 항목을 만들 수 있어요.

<nav class="pagination is-rounded" role="navigation" aria-label="pagination">
  <a href="#" class="pagination-previous">Previous</a>
  <a href="#" class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li>
      <a
        class="pagination-link is-current"
        aria-label="Page 46"
        aria-current="page"
        >46</a
      >
    </li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

크기 (Sizes)

페이지네이션은 3가지 추가 크기를 지원합니다. pagination 컴포넌트에 is-small, is-medium, 또는 is-large 수식어만 붙이면 돼요.

<nav class="pagination is-large" role="navigation" aria-label="pagination">
  <a href="#" class="pagination-previous">Previous</a>
  <a href="#" class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li>
      <a
        class="pagination-link is-current"
        aria-label="Page 46"
        aria-current="page"
        >46</a
      >
    </li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

Sass 및 CSS 변수 (Sass and CSS variables)

더 알아보기 (Learn more)

• Panel 컴포넌트
• Menu 컴포넌트