Pager
用於快速切換到上一筆與下一筆資料以及能夠預覽簡短的資料。使用類別為 .pager 並以此為子元件的前綴詞。主要由 .pager_prev 與 .pager_next 構成。字級可搭配 Typo Header。
<div class="pager h5">
<a class="pager_prev">
<span class="pager_name"></span>
</a>
<a class="pager_next">
<span class="pager_name"></span>
</a>
</div>
Arrow
使用 Arrow 的方法只需要新增 .pager_arrow 於 .pager_prev 與 .pager_next 之內。
<div class="pager h5">
<a class="pager_prev">
<span class="pager_arrow"></span>
<span class="pager_name"></span>
</a>
<a class="pager_next">
<span class="pager_arrow"></span>
<span class="pager_name"></span>
</a>
</div>
Icon
如果要使用圖形或 Iconfont 的方法與 Arrow 相似，需新增一個 .pager_append 於 .pager_prev 與 .pager_next 之內。再將圖形或 Iconfont 放入 .pager_append 裡。
<div class="pager h5">
<a class="pager_prev">
<span class="pager_append">
<i class="icon {code}"></i>
</span>
<span class="pager_name"></span>
</a>
<a class="pager_next">
<span class="pager_append">
<i class="icon {code}"></i>
</span>
<span class="pager_name"></span>
</a>
</div>
Label
新增一個 .pager_label 來標注上下頁，並且將 .pager_name 用來顯示上下頁的標題或簡述。.pager_name 與 .pager_label 需放置於 .pager_content。
<div class="pager h5">
<a class="pager_prev">
<div class="pager_content">
<span class="pager_label"></span>
<span class="pager_name"></span>
</div>
</a>
<a class="pager_next">
<div class="pager_content">
<span class="pager_label"></span>
<span class="pager_name"></span>
</div>
</a>
</div>
混合使用。
<div class="pager h5">
<a class="pager_prev">
<div class="pager_content">
<span class="pager_label"></span>
<span class="pager_name"></span>
</div>
</a>
<a class="pager_next">
<div class="pager_content">
<span class="pager_label"></span>
<span class="pager_name"></span>
</div>
</a>
</div>