Gezinme · Step indicator

Adım göstergesi

Çok adımlı bir akışta kullanıcının kaçıncı adımda olduğunu gösterir.

CSS: kararlı
JavaScript: gerekmiyor
React: kararlı
Vue: kararlı

Örnekler

Temel Canlı örnek

HTML kodunu göster

<nav class="kiris-adimlar" aria-label="Başvuru adımları">
  <p class="kiris-adimlar__sayi">Adım 2 / 4</p>
  <ol class="kiris-adimlar__liste">
    <li class="kiris-adimlar__oge kiris-adimlar__oge--bitti">Kimlik doğrulama</li>
    <li class="kiris-adimlar__oge kiris-adimlar__oge--etkin" aria-current="step">Başvuru bilgileri</li>
    <li class="kiris-adimlar__oge">Belgeler</li>
    <li class="kiris-adimlar__oge">Onay</li>
  </ol>
</nav>

Ne zaman kullanılır

Üç ile yedi adım arasındaki akışlarda kullanın.
Adım sayısı belirsizse kullanmayın.

Erişilebilirlik

Geçerli adım aria-current="step" taşır.
Metin "3 / 5" biçiminde de yazılır. Görsel gösterge tek başına yeterli değildir.

Karşılanan WCAG 2.2 ölçütleri 1.3.1 2.4.8

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: US, FR, IE, KR, JP, DK.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-step-indicator ile başlayan sınıflar