Yerleşim · Modal

Kip pencere

Kullanıcıdan tek bir onay veya küçük bir karar ister.

CSS: kararlı
JavaScript: odak tuzağı
React: kararlı
Vue: kararlı

Örnekler

Onay Canlı örnek

HTML kodunu göster

<button class="trds-button trds-button--tehlike" type="button" data-trds-ac="silme-onay">Başvuruyu sil</button>
<dialog class="trds-kip" id="silme-onay" data-trds="kip">
  <h2 class="trds-kip__baslik">Başvuruyu silmek istiyor musunuz?</h2>
  <p class="trds-govde">Bu işlem geri alınamaz.</p>
  <div class="trds-button-grubu">
    <button class="trds-button trds-button--tehlike" type="button">Evet, sil</button>
    <button class="trds-button trds-button--ikincil" type="button" data-trds-kapat>Vazgeç</button>
  </div>
</dialog>

Onay isteyen (alertdialog) Canlı örnek

HTML kodunu göster

<dialog class="trds-kip" role="alertdialog" aria-labelledby="kip-sil-baslik" aria-describedby="kip-sil-metin" open>
  <h2 class="trds-kip__baslik" id="kip-sil-baslik">Başvuruyu silmek istiyor musunuz?</h2>
  <p class="trds-govde" id="kip-sil-metin">Bu işlem geri alınamaz. Yüklediğiniz 3 belge de silinir.</p>
  <div class="trds-button-grubu"><button class="trds-button trds-button--tehlike" type="button">Sil</button><button class="trds-button trds-button--ikincil" type="button">Vazgeç</button></div>
</dialog>

Ne zaman kullanılır

Geri alınamaz bir işlemi onaylatmak için kullanın.
Uzun bir form için kullanmayın. Ayrı bir sayfa kullanın.

Erişilebilirlik

Yerel <dialog> öğesini kullanın. Odak tuzağı tarayıcıdan gelir.
Escape tuşu pencereyi kapatır.
Kapatınca odak pencereyi açan düğmeye döner.

Karşılanan WCAG 2.2 ölçütleri 2.1.2 2.4.3 4.1.2

Kaynak

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