Geri bildirim · Coach mark
Yönlendirme
İlk kullanımda sayfanın parçalarını sırayla tanıtır. Her adım bir hedefi halkalar ve yanında bir kutu açar.
- CSS
- kararlı
- JavaScript
- adımlar
- React
- kararlı
- Vue
- kararlı
Örnekler
Başvurularım
2 açık başvuru
Belgelerim
7 belge
Mesajlar
1 yeni mesaj
HTML kodunu göster
<div data-kiris="yonlendirme">
<button class="kiris-button kiris-button--ikincil" type="button" data-yonlendirme-baslat>Sayfayı tanıt</button>
<div class="kiris-kart-izgara kiris-kart-izgara--3">
<div class="kiris-kart" data-yonlendirme-adim="1" data-yonlendirme-baslik="Başvurularınız" data-yonlendirme-metin="Açık ve biten başvurular burada durur."><h3 class="kiris-kart__baslik">Başvurularım</h3><p class="kiris-kart__ozet">2 açık başvuru</p></div>
<div class="kiris-kart" data-yonlendirme-adim="2" data-yonlendirme-baslik="Belgeleriniz" data-yonlendirme-metin="Yüklediğiniz her belge burada saklanır."><h3 class="kiris-kart__baslik">Belgelerim</h3><p class="kiris-kart__ozet">7 belge</p></div>
<div class="kiris-kart" data-yonlendirme-adim="3" data-yonlendirme-baslik="Mesajlar" data-yonlendirme-metin="Kurumdan gelen her yazı burada. E-posta ile de bildiririz."><h3 class="kiris-kart__baslik">Mesajlar</h3><p class="kiris-kart__ozet">1 yeni mesaj</p></div>
</div>
</div>Ne zaman kullanılır
- Yeni ve karmaşık bir ekranın ilk açılışında kullanın. Bir kere gösterin, atlanabilsin.
- Basit bir formda kullanmayın. Yardım metni yeter.
Erişilebilirlik
- Kutu
role="dialog"taşır, odak içine geçer, Escape bitirir ve odak başlat düğmesine döner. - Her adım "Adım 2 / 3" der. Hedef halkası yalnız renk değildir, kalın bir çerçevedir.
- Betik yoksa hedefler sıradan içerik olarak kalır.
Karşılanan WCAG 2.2 ölçütleri 2.1.12.4.34.1.2
Kaynak
Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: KR.
Bu bileşenin kodu depoda:
- Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
- CSS katmanları,
kiris-coach-markile başlayan sınıflar - Davranış betiği,
data-kiris="yonlendirme"başlatıcısı