• welcome
  • faqs
  • principle
  • semantic
  • tokens
  • components
  • theming
  • typography
  • colors
  • badge
  • button
  • calendar
  • cards
  • checkbox
  • input
  • list
  • message
  • pagination
  • panel
  • segments
  • selectbox
  • switch
  • table
  • tabs
  • tag
  • form
  • grid
  • grid2
  • modal
  • toast

    • Pagination

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

    Base

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

    Limit displayed Number

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

    Button

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
<div class="ga-pagination number round">
    <div class="pagination-nav prev"><i class="xi-angle-left"></i></div>
    <div class="pagination-page-wrapper">
        <div class="pagination-num active">1</div>
        <div class="pagination-num">{n}</div>
        ...
    </div>
    <div class="pagination-nav next"><i class="xi-angle-right"></i></div>
</div>

    User costom Style

    1
    2
    3
    4
    1000
     
<div class="ga-pagination number">
    <div class="pagination-nav pagination-item prev"><i class="xi-angle-left"></i></div>
    <div class="pagination-page-wrapper">
        <div class="pagination-num pagination-item active">1</div>
        <div class="pagination-num pagination-item block-prev"><i class="xi-ellipsis-h"></i></div>
        <div class="pagination-num pagination-item">{n}</div>
        ...
        <div class="pagination-num pagination-item block-next"><i class="xi-ellipsis-h"></i></div>
        <div class="pagination-num pagination-item">{last}</div>
    </div>
    <div class="pagination-nav pagination-item next"><i class="xi-angle-right"></i></div>
</div>

    Page type

    1
    /
    10
     
<div class="ga-pagination page">
    <div class="pagination-nav pagination-item prev"><i class="xi-angle-left"></i></div>
    <div class="pagination-page-wrapper">
        <div class="pagination-info">
            <div class="pagination-nav">1</div>
            <span>/</span>
            <div class="pagination-nav">10</div>
        </div>
    </div>
    <div class="pagination-nav pagination-item next"><i class="xi-angle-right"></i></div>
</div>

    Compact

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
<div class="ga-pagination number compact">
    <div class="pagination-nav prev"><i class="xi-angle-left"></i></div>
    <div class="pagination-page-wrapper">
        <div class="pagination-num active">1</div>
        <div class="pagination-num">{n}</div>
        ...
    </div>
    <div class="pagination-nav next"><i class="xi-angle-right"></i></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 prev"><i class="xi-angle-left"></i></div>
    <div class="pagination-page-wrapper">
        <div class="pagination-num active">1</div>
        <div class="pagination-num">{n}</div>
        ...
    </div>
    <div class="pagination-nav next"><i class="xi-angle-right"></i></div>
</div>