Eylem · Action menu

Eylem menüsü

Bir düğmenin altında açılan eylem listesi. Düzenle, indir, sil.

CSS: kararlı
JavaScript: klavye desteği
React: kararlı
Vue: kararlı

Örnekler

Kayıt eylemleri Canlı örnek

HTML kodunu göster

<div class="kiris-eylem-menusu" data-kiris="eylem-menusu">
  <button class="kiris-button kiris-button--ikincil" type="button" id="em-1-dugme" aria-haspopup="menu" aria-expanded="false" aria-controls="em-1">Eylemler <svg class="kiris-simge" aria-hidden="true"><use href="#kiris-tool-down"/></svg></button>
  <div class="kiris-eylem-menusu__liste" id="em-1" role="menu" aria-labelledby="em-1-dugme" hidden>
    <button class="kiris-eylem-menusu__oge" role="menuitem" type="button"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-tool-edit"/></svg> Düzenle</button>
    <button class="kiris-eylem-menusu__oge" role="menuitem" type="button"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-tool-down"/></svg> İndir</button>
    <button class="kiris-eylem-menusu__oge" role="menuitem" type="button"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-tool-print"/></svg> Yazdır</button>
    <button class="kiris-eylem-menusu__oge kiris-eylem-menusu__oge--tehlike" role="menuitem" type="button"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-close"/></svg> Sil</button>
  </div>
</div>

Ne zaman kullanılır

Bir kayıt için üç ile altı eylem varsa kullanın.
Sayfa gezinmesi için kullanmayın. O menü başlık çubuğundadır.

Erişilebilirlik

aria-haspopup="menu", role="menu" ve role="menuitem". Ok tuşları gezer, Home ve End uçlara gider, Escape kapatır.
Yıkıcı eylem en altta ve kırmızı durur.

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

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: NO, DK, FI, IT, FR, JP.

Bu bileşenin kodu depoda:

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