Ana içeriğe geç
TRDS Türkiye Kamu Tasarım Sistemi

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

Üç adım Canlı örnek

Başvurularım

2 açık başvuru

Belgelerim

7 belge

Mesajlar

1 yeni mesaj

HTML kodunu göster
<div data-trds="yonlendirme">
  <button class="trds-button trds-button--ikincil" type="button" data-yonlendirme-baslat>Sayfayı tanıt</button>
  <div class="trds-kart-izgara trds-kart-izgara--3">
    <div class="trds-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="trds-kart__baslik">Başvurularım</h3><p class="trds-kart__ozet">2 açık başvuru</p></div>
    <div class="trds-kart" data-yonlendirme-adim="2" data-yonlendirme-baslik="Belgeleriniz" data-yonlendirme-metin="Yüklediğiniz her belge burada saklanır."><h3 class="trds-kart__baslik">Belgelerim</h3><p class="trds-kart__ozet">7 belge</p></div>
    <div class="trds-kart" data-yonlendirme-adim="3" data-yonlendirme-baslik="Mesajlar" data-yonlendirme-metin="Kurumdan gelen her yazı burada. E-posta ile de bildiririz."><h3 class="trds-kart__baslik">Mesajlar</h3><p class="trds-kart__ozet">1 yeni mesaj</p></div>
  </div>
</div>

Ne zaman kullanılır

Erişilebilirlik

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.