Paginations

因為名稱太長我又懶,所以Pagination相關元件皆以 .pagi為開頭

預設樣式

建立一個 <ul class="pagi">,每一個項目 <li class="pagi-item"> 置入其中,每個連結為 <a class="pagi-link">,若是純文字可以改用 <span class="pagi-text">

<ul class="pagi">
    <li class="pagi-item"><span class="pagi-text">«</span></li>
    <li class="pagi-item"><a class="pagi-link">1</a></li>
    <li class="pagi-item"><a class="pagi-link">2</a></li>
    <li class="pagi-item"><a class="pagi-link">3</a></li>
    <li class="pagi-item"><span class="pagi-text">…</span></li>
    <li class="pagi-item"><a class="pagi-link">10</a></li>
    <li class="pagi-item"><a class="pagi-link">»</a></li>
</ul>

狀態

作用中的 .active 與禁用中的 .disabled 皆可加在 .pagi-item上。

<ul class="pagi">
    <li class="pagi-item"><span class="pagi-text">«</span></li>
    <li class="pagi-item active"><a class="pagi-link">1</a></li>
    <li class="pagi-item"><a class="pagi-link">2</a></li>
    <li class="pagi-item"><a class="pagi-link">3</a></li>
    <li class="pagi-item"><span class="pagi-text">…</span></li>
    <li class="pagi-item disabled"><a class="pagi-link">10</a></li>
    <li class="pagi-item"><a class="pagi-link">»</a></li>
</ul>

尺寸

Paginations 的尺寸提供 .size-sm 以及 .size-lg 兩種,並且可直接加在 .pagi 上。



<ul class="pagi size-sm">~略~</ul>
<ul class="pagi">~略~</ul>
<ul class="pagi size-lg">~略~</ul>

對齊

Paginations 裡的項目皆可改變對齊方式,包含置中與靠右,只要在 .pagi 加上 .align-center 或是 .align-right 即可。



<ul class="pagi">~略~</ul>
<ul class="pagi align-center">~略~</ul>
<ul class="pagi align-right">~略~</ul>

Bordered

<ul class="pagi pagi-bordered">~略~</ul>

Pagi Bordered 要使用對齊時,請額外加一層容器,並且加上 .align-center 或是 .align-right

<div class="align-center">
    <ul class="pagi pagi-bordered">~略~</ul>
</div>