Lompat ke konten
EN KO VI NE KM ID
Desain kartu nama English Koleksi karakter 16 desain · PNG / SVG / PDF

Paginasi

Untuk daftar yang panjangnya harus dibagi halaman, saat orang perlu tahu di halaman berapa dan melompat.

Navigasi

Pratinjau langsung

Sumber

<nav class="dc-pg" aria-label="템플릿 목록 페이지">
  <a class="dc-pg__edge" href="#" rel="prev"><span aria-hidden="true">‹</span>이전</a>
  <ul class="dc-pg__list">
    <li><a class="dc-pg__num" href="#">1</a></li>
    <li><span class="dc-pg__gap" aria-hidden="true">…</span></li>
    <li><a class="dc-pg__num" href="#">4</a></li>
    <li><a class="dc-pg__num is-current" href="#" aria-current="page"><span class="dc-sr">현재 페이지, </span>5</a></li>
    <li><a class="dc-pg__num" href="#">6</a></li>
    <li><span class="dc-pg__gap" aria-hidden="true">…</span></li>
    <li><a class="dc-pg__num" href="#">20</a></li>
  </ul>
  <a class="dc-pg__edge" href="#" rel="next">다음<span aria-hidden="true">›</span></a>
</nav>
.dc-pg {
  display: flex; align-items: center; gap: var(--dc-2);
  font-family: var(--dc-font);
}
.dc-pg__list {
  display: flex; align-items: center; gap: var(--dc-1);
  list-style: none; margin: 0; padding: 0; overflow-x: auto;
}
.dc-pg__num {
  display: grid; place-items: center; min-width: 44px; height: 44px;
  padding: 0 var(--dc-1); border-radius: var(--dc-r-sm);
  color: var(--dc-text-sub); text-decoration: none;
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background var(--dc-fast), color var(--dc-fast);
}
.dc-pg__num:hover { background: var(--dc-sunken); color: var(--dc-text); }
.dc-pg__num.is-current {
  background: var(--dc-brand); color: var(--dc-text-on); font-weight: 800;
}
.dc-pg__gap {
  display: grid; place-items: center; min-width: 28px; height: 44px;
  color: var(--dc-text-mute);
}
.dc-pg__edge {
  display: flex; align-items: center; gap: var(--dc-1);
  height: 44px; padding: 0 var(--dc-3);
  border: 1px solid var(--dc-line); border-radius: var(--dc-r-sm);
  background: var(--dc-surface); color: var(--dc-text);
  text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background var(--dc-fast), border-color var(--dc-fast);
}
.dc-pg__edge:hover { background: var(--dc-sunken); border-color: var(--dc-line-bold); }
.dc-pg__edge.is-off {
  background: var(--dc-sunken); color: var(--dc-text-mute);
  border-color: var(--dc-line); cursor: not-allowed;
}
.dc-pg__edge.is-off:hover { background: var(--dc-sunken); border-color: var(--dc-line); }

.dc-pg--simple { justify-content: space-between; max-width: 420px; }
.dc-pg__total {
  color: var(--dc-text-sub); font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dc-pg--more { flex-direction: column; gap: var(--dc-2); }
.dc-pg__morebtn {
  min-height: 44px; padding: 0 var(--dc-6);
  border: 1px solid var(--dc-line-bold); border-radius: var(--dc-r-full);
  background: var(--dc-surface); color: var(--dc-text);
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background var(--dc-fast);
}
.dc-pg__morebtn:hover { background: var(--dc-sunken); }
.dc-pg__count { margin: 0; color: var(--dc-text-mute); font-size: 13px; }

Cara memakainya

  • Tandai halaman aktif dengan aria-current="page", jangan hanya lewat warna
  • Tampilkan satu dua halaman di tiap sisi dan ringkas sisanya jadi …, halaman pertama dan terakhir selalu ada
  • Di halaman pertama, biarkan 'Sebelumnya' tetap ada tapi tidak bisa diklik

Hal yang perlu diwaspadai

  • Area klik minimal 44×44px — angka kecil saja susah ditekan
  • Beri aria-label pada nav; dua daftar berhalaman dalam satu layar jadi tak terbedakan

Berikutnya