សូចនាករជំហាន

ប្រើពេលបែងចែកទម្រង់វែងជាច្រើនអេក្រង់ ដើម្បីឲ្យដឹងថាឥឡូវនៅជំហានណា និងនៅសល់ប៉ុន្មាន។

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

ប្រភព

HTML CSS

<nav class="dc-steps" aria-label="입사 지원 단계">
  <ol class="dc-steps__list">
    <li class="dc-steps__item is-done">
      <span class="dc-steps__mark" aria-hidden="true">✓</span>
      <span class="dc-steps__text">
        <span class="dc-steps__num">1단계</span>
        <a class="dc-steps__name dc-steps__link" href="#">본인 확인</a>
      </span>
      <span class="dc-sr">완료</span>
    </li>
    <li class="dc-steps__item is-now" aria-current="step">
      <span class="dc-steps__mark" aria-hidden="true">2</span>
      <span class="dc-steps__text">
        <span class="dc-steps__num">2단계</span>
        <span class="dc-steps__name">경력 입력</span>
      </span>
      <span class="dc-sr">지금 하는 단계</span>
    </li>
    <li class="dc-steps__item">
      <span class="dc-steps__mark" aria-hidden="true">3</span>
      <span class="dc-steps__text">
        <span class="dc-steps__num">3단계</span>
        <span class="dc-steps__name">서류 올리기</span>
      </span>
    </li>
    <li class="dc-steps__item">
      <span class="dc-steps__mark" aria-hidden="true">4</span>
      <span class="dc-steps__text">
        <span class="dc-steps__num">4단계</span>
        <span class="dc-steps__name">최종 확인</span>
      </span>
    </li>
  </ol>
</nav>

.dc-steps { font-family:var(--dc-font); }
.dc-steps__list { display:flex; flex-wrap:wrap; margin:0; padding:0; list-style:none; }
.dc-steps__item { position:relative; flex:1 1 150px; display:flex; flex-direction:column; gap:var(--dc-2); min-width:0; padding:var(--dc-1) var(--dc-4) var(--dc-3) 0; }
.dc-steps__item::after { content:""; position:absolute; top:17px; left:36px; right:var(--dc-2); height:2px; border-radius:var(--dc-r-full); background:var(--dc-line-bold); }
.dc-steps__item:last-child::after { content:none; }
.dc-steps__item.is-done::after { background:var(--dc-brand); }
.dc-steps__mark { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border:2px solid var(--dc-line-bold); border-radius:var(--dc-r-full); background:var(--dc-surface); font-size:13px; font-weight:700; line-height:1; color:var(--dc-text-sub); }
.dc-steps__item.is-done .dc-steps__mark { border-color:var(--dc-brand); background:var(--dc-brand); color:var(--dc-text-on); }
.dc-steps__item.is-now .dc-steps__mark { border-color:var(--dc-brand); background:var(--dc-brand-soft); color:var(--dc-brand-text); box-shadow:0 0 0 4px var(--dc-brand-soft); }
.dc-steps__item.is-error .dc-steps__mark { border-color:var(--dc-danger); background:var(--dc-danger-soft); color:var(--dc-danger); }
.dc-steps__text { display:flex; flex-direction:column; gap:2px; padding-right:var(--dc-3); }
.dc-steps__num { font-size:12px; color:var(--dc-text-mute); }
.dc-steps__name { font-size:14px; font-weight:600; color:var(--dc-text-sub); }
.dc-steps__item.is-now .dc-steps__name { color:var(--dc-text); }
.dc-steps__item.is-error .dc-steps__name { color:var(--dc-danger); }
.dc-steps__link { color:var(--dc-brand-text); text-decoration:underline; text-underline-offset:.15em; }
.dc-steps__link:hover { color:var(--dc-text); }
.dc-steps__msg { margin:0; font-size:12px; font-weight:600; color:var(--dc-danger); }
.dc-steps--v .dc-steps__list { flex-direction:column; }
.dc-steps--v .dc-steps__item { flex:0 0 auto; flex-direction:row; align-items:flex-start; gap:var(--dc-3); padding:0 0 var(--dc-5) 0; }
.dc-steps--v .dc-steps__item::after { top:34px; bottom:var(--dc-1); left:13px; right:auto; width:2px; height:auto; }
.dc-steps--v .dc-steps__text { padding-top:var(--dc-1); }

របៀបប្រើ

រក្សាទុកតែបីដល់ប្រាំជំហាន — ច្រើនជាងនេះ គេនឹងបោះបង់នៅពាក់កណ្ដាលផ្លូវ
អនុញ្ញាតឲ្យត្រឡប់ទៅជំហានដែលបានបំពេញរួច ហើយជំហានខាងមុខមិនអាចចុចបាន
ដាក់ឈ្មោះជំហានតាមការងារនៅទីនោះ ដូចជា "បញ្ចូលបទពិសោធន៍" មិនមែន "ជំហាន ២"

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

ដាក់ aria-current="step" លើជំហានបច្ចុប្បន្ន — ពណ៌តែម្នាក់ឯងមិននិយាយអ្វីទេ
ពេលជំហានបួនមិនអាចដាក់ក្នុងមួយជួរ សូមប្ដូរទៅបែបបញ្ឈរ

បន្ទាប់

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

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

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

ការបែងចែកទំព័រ ការរុករក វេប