Yerleşim · Details

Ayrıntılar

Tek bir yardımcı açıklamayı istek üzerine gösterir.

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

Örnekler

Temel Canlı örnek

T.C. kimlik numaramı nerede bulurum?

Nüfus cüzdanınızın ön yüzünde, ad ve soyadınızın üstünde yazar.

HTML kodunu göster

<details class="trds-ayrinti">
  <summary>T.C. kimlik numaramı nerede bulurum?</summary>
  <p class="trds-govde">Nüfus cüzdanınızın ön yüzünde, ad ve soyadınızın üstünde yazar.</p>
</details>

Ne zaman kullanılır

Kullanıcıların çoğunun ihtiyaç duymadığı bir açıklama için kullanın.
Birden çok bölüm için akordiyon kullanın.

Erişilebilirlik

Yerel <details> ve <summary> etiketlerini kullanın. JavaScript gerekmez.
Özet metni bir soru gibi yazılır.

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

Kaynak

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