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"></i> </span> <span class="pager_name"></span> </a> <a class="pager_next"> <span class="pager_append"> <i class="icon"></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_prev"> <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"> <span class="pager_append"></span> <div class="pager_content"> <span class="pager_label"></span> <span class="pager_name"></span> </div> </a> <a class="pager_prev"> <span class="pager_append"></span> <div class="pager_content"> <span class="pager_label"></span> <span class="pager_name"></span> </div> </a> </div>