Menü

Menü, biçimlendirilmiş bir paneli olan bir <details> öğesidir. Bu, popover API’sine karşı bilinçli bir seçimdir: bir popover en üst katmanda yaşar ve henüz her yerde bulunmayan çapa konumlandırma olmadan tetikleyicisine göre konumlandırılamaz. Bir <details> bugün kendini doğru konumlandırır ve hiçbir şeyin yüklenmesini gerektirmez.

Tetikleyici, düğme gibi biçimlendirilmiş o <summary> öğesidir — bu yüzden işlenmiş bir button() geçirmek yerine etiketi ve düğme proplarını menu() işlevine geçirirsiniz. Bir summary zaten etkileşimlidir ve içindeki bir düğme, tek bir eylemin olduğu yere iki denetim yuvalar: geçersiz biçimlendirme ve tek bir şey için iki sekme durağı.

Dışarı tıklamada ve Escape ile kapanma, bir menü ilk kez açıldığında — ve yalnızca o zaman — onları içe aktaran bir ontoggle işleyicisinden gelir. O modül hiç gelmezse menü yine kendi summary öğesinden açılıp kapanır.

menu({ trigger: 'Eylemler' },
  menuItem({ href: '#edit' }, 'Düzenle'),
  menuItem({ href: '#duplicate' }, 'Çoğalt'),
  menuSeparator(),
  menuItem({ href: '#delete' }, 'Sil'),
)

Hizalama

Menü, tetikleyicisinin baş kenarından açılır. align: 'end' onu çevirir; bir çubuğun sağ kenarına yakın bir menünün ihtiyacı budur.

stack({ direction: 'row', gap: 'xl', justify: 'space-between', style: 'width: 100%' },
  menu({ trigger: 'Başa hizalı', variant: 'soft' },
    menuItem({ href: '#a' }, 'Birinci'),
    menuItem({ href: '#b' }, 'İkinci'),
  ),
  menu({ trigger: 'Sona hizalı', variant: 'soft', align: 'end' },
    menuItem({ href: '#c' }, 'Birinci'),
    menuItem({ href: '#d' }, 'İkinci'),
  ),
)

Simge tetikleyicileri

trigger metni olmayan bir simge bir label ister — simgenin veremeyeceği erişilebilir ad o olur.

stack({ direction: 'row', gap: 'md' },
  menu({
    align: 'end',
    label: 'Daha fazla eylem',
    variant: 'ghost',
    icon: icon('more-horizontal'),
  },
    menuItem({ href: '#rename' }, 'Yeniden adlandır'),
    menuItem({ href: '#move' }, 'Taşı'),
    menuSeparator(),
    menuItem({ href: '#archive' }, 'Arşivle'),
  ),
)

Simgeli öğeler

menu({ trigger: 'Dosya' },
  menuItem({
    href: '#new',
    icon: icon('plus'),
  }, 'Yeni sayfa'),
  menuItem({
    href: '#open',
    icon: icon('folder'),
  }, 'Aç…'),
  menuSeparator(),
  menuItem({
    href: '#build',
    icon: icon('zap'),
  }, 'Siteyi derle'),
)

Bağlantı yerine düğme

href taşımayan bir öğe bir <button> işler — gezinme değil, sayfada gerçekleşen bir eylem için.

menu({ trigger: 'Dışa aktar', variant: 'soft', color: 'primary' },
  menuItem({ onclick: "import('/su/toast.js').then(m=>m.toast('JSON olarak dışa aktarıldı.',{color:'success'}))" }, 'JSON olarak'),
  menuItem({ onclick: "import('/su/toast.js').then(m=>m.toast('CSV olarak dışa aktarıldı.',{color:'success'}))" }, 'CSV olarak'),
)

Bir uygulama çubuğunda

sitelo

appBar({ brand: 'sitelo' },
  appBarSpacer(),
  appBarActions(
    themeToggle(),
    menu({
      align: 'end',
      label: 'Daha fazla',
      variant: 'ghost',
      icon: icon('more-horizontal'),
    },
      menuItem({ href: '/docs' }, 'Belgeler'),
      menuItem({ href: '/examples' }, 'Örnekler'),
      menuSeparator(),
      menuItem({ href: 'https://github.com/paul-browne/sitelo' }, 'GitHub'),
    ),
  ),
)

Erişilebilirlik

Panel, öğeleri role="menuitem" olan bir role="menu" öğesidir ve summary aria-haspopup taşır. Bir <details> yerli bir menü aracı değildir, bu yüzden bu kusursuz değil makul bir yaklaşımdır — düz bir bağlantı listesi için details içindeki bir nav da aynı ölçüde geçerlidir ve daha az iddia eder.

Proplar

menu() — tetikleyici propları düğmenin proplarıdır:

Prop	Tür	Varsayılan	Açıklama
`trigger`	`Child`	—	Görünen etiket. İşlenmiş bir button() değil, metin geçirin.
`icon`	`Child`	—	Etiketten önceki biçimlendirme ya da yalnızca simgeli bir tetikleyici için tek başına.
`label`	`string`	—	Erişilebilir ad. Simge varken ve tetikleyici metni yokken zorunludur.
`variant`	`'solid' \| 'soft' \| 'outline' \| 'ghost' \| 'link'`	`'outline'`	Tetikleyici biçimlendirmesi.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'neutral'`	Tetikleyicinin hangi paletten besleneceği.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tetikleyici boyutu.
`align`	`'start' \| 'end'`	`'start'`	Panelin tetikleyicinin hangi kenarıyla hizalandığı.
`triggerClass`	`string`	—	Saran details yerine tetikleyici için fazladan sınıflar.

menuItem():

Prop	Tür	Varsayılan	Açıklama
`href`	`string`	—	Bir çapa işler; o olmadan bir düğme.
`icon`	`Child`	—	Etiketten önceki biçimlendirme.
`as`	`string`	`'button'`	href yokken işlenecek öğe.

menuSeparator() prop almaz — öğe grupları arasındaki ince çizgidir.