Overviews
  • welcome
  • FAQs
  • components
    • Bases
  • typography
  • colors
    • Elements
  • button
  • input
  • tag
  • checkbox
  • switch
  • badge
  • list
  • selectbox
  • message
  • tabs
  • cards
  • segments
  • table
  • pagination
  • panel
  • calendar
    • Layouts
  • form
  • grid
  • grid2
    • Modules
  • modal
  • toast

    • Pagination

    여러 페이지의 콘텐츠를 탐색하기 위한 페이지네이션 UI.

    Base

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
      <div class="ga-pagination">
      <div class="pagination-nav"><i class="xi-chevron-left" /></div>
      <div class="pagination-page-wrapper">
          <div class="pagination-num"> {n} </div>
          ... ...
      </div>
      <div class="pagination-nav"><i class="xi-chevron-left" /></div>
  </div>

    Limit displayed Number

    1
    2
    3
    4
    10
      <div class="ga-pagination">
      <div class="pagination-nav"><i class="xi-chevron-left" /></div>
      <div class="pagination-page-wrapper">
          <div class="pagination-num"> 1 </div>
          <div class="pagination-num block-prev"><i class="xi-ellipsis" /></div>
          <div class="pagination-num"> {n} </div>
          ... ...
          <div class="pagination-num block-next"><i class="xi-ellipsis" /></div>
          <div class="pagination-num"> {Last num} </div>
      </div>
      <div class="pagination-nav"><i class="xi-chevron-left" /></div>
  </div>

    Button

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
      <div class="ga-pagination number round">
      <div class="pagination-nav"><i class="xi-chevron-left" /></div>
      <div class="pagination-page-wrapper">
          ... ...
      </div>
      <div class="pagination-nav"><i class="xi-chevron-left" /></div>
  </div>

    User costom Style

    1
    2
    3
    4
    1000
      <div class="ga-pagination number">
      <div class="pagination-nav"><i class="xi-chevron-left" /></div>
      <div class="pagination-page-wrapper">
          ... ...
      </div>
      <div class="pagination-nav"><i class="xi-chevron-left" /></div>
  </div>

    Page type

    1
    /
    10
      <div class="ga-pagination page">
      <div class="pagination-nav pagination-item"><i class="xi-chevron-left" /></div>
      <div class="pagination-page-wrapper">
          <div class="pagination-info"> 1/10 </div>
      </div>
      <div class="pagination-nav pagination-item"><i class="xi-chevron-left" /></div>
  </div>

    Compact

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
      <div class="ga-pagination number compact">
      <div class="pagination-nav"><i class="xi-chevron-left" /></div>
      <div class="pagination-page-wrapper">
          ... ...
      </div>
      <div class="pagination-nav"><i class="xi-chevron-left" /></div>
  </div>

    Align

    LEFT
    1
    2
    3
    4
    5
    CENTER
    1
    2
    3
    4
    5
    RIGHT
    1
    2
    3
    4
    5
      <div class="ga-pagination number align-{left | center | right}">
      <div class="pagination-nav"><i class="xi-chevron-left" /></div>
      <div class="pagination-page-wrapper">
          ... ...
      </div>
      <div class="pagination-nav"><i class="xi-chevron-left" /></div>
  </div>