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

Onay isteyen (alertdialog) Canlı örnek

HTML kodunu göster

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

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-modal ile başlayan sınıflar
Davranış betiği, data-kiris="kip" başlatıcısı