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