İçerik · Summary list

Özet listesi

Kullanıcının girdiği bilgileri gönderim öncesinde tek sayfada gösterir.

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

Örnekler

Cevaplarınızı kontrol edin Canlı örnek

Ad soyad: Ayşe Yılmaz; Değiştir ad soyad
Doğum tarihi: 27.03.1997; Değiştir doğum tarihi

HTML kodunu göster

<dl class="kiris-ozet">
  <div class="kiris-ozet__satir">
    <dt class="kiris-ozet__anahtar">Ad soyad</dt>
    <dd class="kiris-ozet__deger">Ayşe Yılmaz</dd>
    <dd class="kiris-ozet__eylem"><a href="#">Değiştir<span class="kiris-gorsel-gizli"> ad soyad</span></a></dd>
  </div>
  <div class="kiris-ozet__satir">
    <dt class="kiris-ozet__anahtar">Doğum tarihi</dt>
    <dd class="kiris-ozet__deger">27.03.1997</dd>
    <dd class="kiris-ozet__eylem"><a href="#">Değiştir<span class="kiris-gorsel-gizli"> doğum tarihi</span></a></dd>
  </div>
</dl>

Ne zaman kullanılır

Her form akışının sonunda "Cevaplarınızı kontrol edin" sayfasında kullanın.
Her satır düzenleme bağlantısı taşır.

Erişilebilirlik

<dl>, <dt> ve <dd> etiketlerini kullanın.
Düzenleme bağlantısı hangi alanı düzenlediğini gizli metinle söyler.

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

Kaynak

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

Bu bileşenin kodu depoda:

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