Geri bildirim · Popover

Açılır bilgi

Bir düğmeye basınca açılan küçük panel. İpucundan farkı: dokunmayla çalışır ve bağlantı taşıyabilir.

CSS: kararlı
JavaScript: aç ve kapat
React: kararlı
Vue: kararlı

Örnekler

Alan yanında Canlı örnek

HTML kodunu göster

<div class="kiris-acilir-bilgi" data-kiris="acilir-bilgi">
  <button class="kiris-acilir-bilgi__dugme" type="button" aria-expanded="false" aria-controls="ab-1"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-question23"/></svg><span class="kiris-gorsel-gizli">Vergi kimlik numarası nedir?</span></button>
  <div class="kiris-acilir-bilgi__panel" id="ab-1" role="region" aria-live="polite" hidden>
    <p class="kiris-govde">10 haneli numara. Vergi levhanızda ve <a class="kiris-link" href="#">Dijital Vergi Dairesi</a>’nde yazar.</p>
    <button class="kiris-button kiris-button--ikincil kiris-button--kucuk" type="button" data-kiris-kapat>Kapat</button>
  </div>
</div>

Ne zaman kullanılır

Bir alanın yanında "Bu nedir?" sorusu için kullanın.
Uzun metin için kullanmayın. Ayrıntılar bileşeni vardır.

Erişilebilirlik

Düğme aria-expanded ve aria-controls taşır. Panel açılınca odak düğmede kalır.
Escape, dışarı tıklama ve kapat düğmesi kapatır. Panel aria-live="polite" ile duyurulur.

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

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: NO, IE, IT, NL, CH.

Bu bileşenin kodu depoda:

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