LivaMenu

Herhangi bir tetikleyici öğeye (trigger) bağlanan, tıklanınca açılan menü bileşeni. DevExtreme ContextMenu üzerine kuruludur; menü öğeleri items dizisiyle veri odaklı tanımlanır ve konumu position ile ayarlanır.

Not: Bu bileşen henüz yayınlanmış @dataliva/livalib sürümünde dışa aktarılmıyor; bu sayfa API'yi belgeler, canlı demo bir sonraki sürümle eklenecektir.

import { LivaMenu } from "@dataliva/livalib";

Temel kullanım

Bir tetikleyici (buton, avatar, ikon vb.) ve menü öğelerini verin. Tetikleyiciye tıklandığında menü, position ile belirtilen yerde açılır.

<LivaMenu
  trigger={<LivaButton text="Menü" />}
  items={[
    { id: "profile", text: "Profil", onClick: () => openProfile() },
    { id: "settings", text: "Ayarlar", onClick: () => openSettings() },
    { id: "logout", text: "Çıkış", onClick: () => logout() },
  ]}
/>

Konumlandırma

position menünün tetikleyiciye göre nereden açılacağını belirler; offset ile piksel bazında ince ayar yapılır.

<LivaMenu
  trigger={<LivaIconButton icon="overflow" />}
  position="bottom-end"
  offset={6}
  items={items}
/>

Geçerli position değerleri: bottom, bottom-start, bottom-end, top, top-start, top-end, left, left-start, left-end, right, right-start, right-end.

Menü öğeleri

Her öğe LivaMenuItem tipindedir. type alanı öğenin görünümünü belirler: item (varsayılan, tıklanabilir), label (tıklanamayan başlık) ve divider (ayraç).

const items: LivaMenuItem[] = [
  { id: "grp", text: "Hesap", type: "label" },
  { id: "profile", text: "Profil", icon: <UserIcon />, onClick: onProfile },
  { id: "sep", type: "divider" },
  { id: "logout", text: "Çıkış", onClick: onLogout, style: { color: "red" } },
];

LivaMenuItem