ការបែងចែកទំព័រ

សម្រាប់បញ្ជីវែងដែលបែងជាទំព័រ ពេលអ្នកប្រើត្រូវដឹងថានៅទំព័រណា និងលោតទៅទំព័រផ្សេង។

មើលជាមុនផ្ទាល់

ប្រភព

HTML CSS

<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; }

របៀបប្រើ

ដាក់ aria-current="page" លើទំព័របច្ចុប្បន្ន មិនត្រូវប្រើតែពណ៌
បង្ហាញមួយពីរទំព័រសងខាង បង្រួមនៅសល់ក្នុង … ហើយរក្សាទំព័រទីមួយនិងចុងក្រោយ
នៅទំព័រទីមួយ ទុក 'មុន' ដែលចុចមិនបាន ជាជាងដកវាចេញ

ចំណុចត្រូវប្រុងប្រយ័ត្ន

តំបន់ចុចត្រូវមានទំហំយ៉ាងតិច 44×44px — លេខតូចៗសុទ្ធពិបាកចុច
ដាក់ aria-label លើ nav; បញ្ជីពីរលើអេក្រង់តែមួយនឹងមិនអាចបែងចែក

បន្ទាប់

ក្បាលទំព័រ ការរុករក វេប

មឺនុយទម្លាក់ ការរុករក វេប

ផ្លូវនាំ breadcrumb ការរុករក វេប

ថេប ការរុករក កម្មវិធី វេប