MenuMenü

A menü komponens függőlegesen rendezett lehetőségeket jelenít meg. Amikor a felhasználó egy gombbal vagy más vezérlővel lép kapcsolatba, a menü megjelenik.

Ha lenyíló menüt szeretne megvalósítani, használhatja a <mdui-dropdown> komponenst.

Használat

A komponensek importálása:

import 'mdui/components/menu.js';
import 'mdui/components/menu-item.js';

A komponensek TypeScript-típusainak importálása:

import type { Menu } from 'mdui/components/menu.js';
import type { MenuItem } from 'mdui/components/menu-item.js';

Példa:

1. elem

2. elem

<mdui-menu>
  <mdui-menu-item>1. elem</mdui-menu-item>
  <mdui-menu-item>2. elem</mdui-menu-item>
</mdui-menu>

Adja meg a selects attribútumot single értékkel a <mdui-menu> komponenshez az egyszerű kiválasztás funkció aktiválásához. Ekkor a <mdui-menu> value értéke a kijelölt <mdui-menu-item> value értéke lesz.

1. elem

2. elem

<mdui-menu selects="single" value="item-2">
  <mdui-menu-item value="item-1">1. elem</mdui-menu-item>
  <mdui-menu-item value="item-2">2. elem</mdui-menu-item>
</mdui-menu>

Forrás

Többszörös kiválasztás támogatása

Adja meg a selects attribútumot multiple értékkel a <mdui-menu> komponenshez a többszörös kiválasztás funkció aktiválásához. Ekkor a <mdui-menu> value értéke a kijelölt <mdui-menu-item>-ek value értékeiből álló tömb lesz.

Figyelem: Többszörös kiválasztás módban a <mdui-menu> value értéke egy tömb, amelyet csak JavaScript tulajdonságon keresztül lehet beolvasni és beállítani.

1. elem

2. elem

3. elem

<mdui-menu selects="multiple" class="example-multiple">
  <mdui-menu-item value="item-1">1. elem</mdui-menu-item>
  <mdui-menu-item value="item-2">2. elem</mdui-menu-item>
  <mdui-menu-item value="item-3">3. elem</mdui-menu-item>
</mdui-menu>

<script>
  // Alapértelmezés szerint jelölje ki az item-1 és item-2 elemeket
  const menu = document.querySelector(".example-multiple");
  menu.value = ["item-1", "item-2"];
</script>

Forrás

Ikon

A <mdui-menu-item> komponensben az icon és end-icon attribútumokkal Material Icons ikonokat adhat a menüpont bal és jobb oldalán. Az end-text attribútummkiegészítő szöveget adhat a jobb oldalhoz. Ezen kívül az icon, end-icon és end-text slotokon keresztül is hozzáadhat ikonokat és szövegeket a menüpont bal és jobb oldalához.

Ha üres ikonhelyet szeretne hagyni a menüpont bal oldalán, hogy megtartsa az igazodást más menüpontokkal, állítsa az icon attribútumot üres karakterláncra.

1. elem

2. elem

Ctrl+X

3. elem

<mdui-menu>
  <mdui-menu-item icon="visibility" end-icon="add_circle" end-text="Ctrl+X">1. elem</mdui-menu-item>
  <mdui-menu-item>
    2. elem
    <mdui-icon slot="icon" name="visibility"></mdui-icon>
    <mdui-icon slot="end-icon" name="add_circle"></mdui-icon>
    <span slot="end-text">Ctrl+X</span>
  </mdui-menu-item>
  <mdui-menu-item icon="">3. elem</mdui-menu-item>
</mdui-menu>

Forrás

Egyszerű vagy többszörös kiválasztás módban a selected-icon attribútummal vagy a selected-icon slot-tal beállíthatja a kijelölt állapot ikonját.

1. elem

2. elem

<mdui-menu selects="multiple">
  <mdui-menu-item value="item-1" selected-icon="cloud_done">1. elem</mdui-menu-item>
  <mdui-menu-item value="item-2">
    <mdui-icon slot="selected-icon" name="done_outline"></mdui-icon>
    2. elem
  </mdui-menu-item>
</mdui-menu>

Forrás

Link

A <mdui-menu-item> komponensben a href attribútum beállításával a menüpont linkként is használható, és a linkhez kapcsolódó további attribútumokat is használhatja: download, target, rel.

1. elem

2. elem

<mdui-menu>
  <mdui-menu-item href="https://www.mdui.org" target="_blank">1. elem</mdui-menu-item>
  <mdui-menu-item>2. elem</mdui-menu-item>
</mdui-menu>

Forrás

Almenü

A <mdui-menu-item> komponensben a submenu slotban adhatja meg az almenüpontok elemeit.

Sorköz Egyszeres

1,5

Dupla

Egyéni: 1,2

Bekezdés stílus

<mdui-menu>
  <mdui-menu-item>
    Sorköz
    <mdui-menu-item slot="submenu">Egyszeres</mdui-menu-item>
    <mdui-menu-item slot="submenu">1,5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Dupla</mdui-menu-item>
    <mdui-menu-item slot="submenu">Egyéni: 1,2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Bekezdés stílus</mdui-menu-item>
</mdui-menu>

Forrás

A <mdui-menu> komponensen a submenu-trigger attribútummal beállíthatja az almenü aktiválási módját.

Sorköz Egyszeres

1,5

Dupla

Egyéni: 1,2

Bekezdés stílus

<mdui-menu submenu-trigger="click">
  <mdui-menu-item>
    Sorköz
    <mdui-menu-item slot="submenu">Egyszeres</mdui-menu-item>
    <mdui-menu-item slot="submenu">1,5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Dupla</mdui-menu-item>
    <mdui-menu-item slot="submenu">Egyéni: 1,2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Bekezdés stílus</mdui-menu-item>
</mdui-menu>

Forrás

Ha a submenu-trigger attribútum értéke hover, a <mdui-menu> komponensen a submenu-open-delay és submenu-close-delay attribútumokkal beállíthatja az almenü nyitásának és zárásának késleltetését.

Sorköz Egyszeres

1,5

Dupla

Egyéni: 1,2

Bekezdés stílus

<mdui-menu submenu-trigger="hover" submenu-open-delay="1000" submenu-close-delay="1000">
  <mdui-menu-item>
    Sorköz
    <mdui-menu-item slot="submenu">Egyszeres</mdui-menu-item>
    <mdui-menu-item slot="submenu">1,5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Dupla</mdui-menu-item>
    <mdui-menu-item slot="submenu">Egyéni: 1,2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Bekezdés stílus</mdui-menu-item>
</mdui-menu>

Forrás

Egyéni tartalom

A <mdui-menu-item> komponensben a custom slotban teljesen testreszabhatja a menüpont tartalmát.

ABS

Egy szám abszolút értéke

ACOS

Egy szám arkusz koszinusza, radiánban kifejezve

ACOSH

Egy szám arkusz hiperbolikus koszinusza

<style>
  .custom-item {
    padding: 4px 12px;
  }

  .custom-item .secondary {
    display: none;
    color: #888;
    font-size: 13px;
  }

  .custom-item:hover .secondary {
    display: block
  }
</style>

<mdui-menu>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ABS</div>
      <div class="secondary">Egy szám abszolút értéke</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOS</div>
      <div class="secondary">Egy szám arkusz koszinusza, radiánban kifejezve</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOSH</div>
      <div class="secondary">Egy szám arkusz hiperbolikus koszinusza</div>
    </div>
  </mdui-menu-item>
</mdui-menu>

Forrás

Attribútum	Tulajdonság	Típus	Alapértelmezett
`value`	`value`	`string`	-
A menüpont értéke.
`disabled`	`disabled`	`boolean`	`false`
A menüpont letiltása.
`icon`	`icon`	`string`	-
A bal oldali Material Icons ikon neve. Beállítható a `slot="icon"` segítségével is. Ha a bal oldalon nem szükséges ikon megjelenítése, de egy ikon helyét fenn kell tartani, üres karakterlánc adható át helyfoglalásként.
`end-icon`	`endIcon`	`string`	-
A jobb oldali Material Icons ikon neve. Beállítható a `slot="end-icon"` segítségével is.
`end-text`	`endText`	`string`	-
A jobb oldali szöveg. Beállítható a `slot="end-text"` segítségével is.
`selected-icon`	`selectedIcon`	`string`	-
A kiválasztott állapot Material Icons ikonjának neve. Beállítható a `slot="selected-icon"` segítségével is.
`submenu-open`	`submenuOpen`	`boolean`	`false`
Az almenü nyitva van-e.
`href`	`href`	`string`	-
A hivatkozás cél URL-je. Ha ez a tulajdonság meg van adva, a komponens belsőleg `<a>` elemként renderelődik, és használhatók lesznek a hivatkozásokhoz kapcsolódó attribútumok.
`download`	`download`	`string`	-
A letöltési hivatkozás célja. Megjegyzés: Csak akkor érvényes, ha a `href` attribútum meg van adva.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
A hivatkozás megnyitásának módja. A lehetséges értékek: `_blank`: Új ablakban nyitja meg a hivatkozást `_parent`: A szülő keretben nyitja meg a hivatkozást `_self`: Alapértelmezett. Az aktuális keretben nyitja meg a hivatkozást `_top`: A teljes ablakban nyitja meg a hivatkozást Megjegyzés: Csak akkor érvényes, ha a `href` attribútum meg van adva.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Az aktuális dokumentum és a hivatkozott dokumentum közötti kapcsolat. Lehetséges értékek: `alternate`: Az aktuális dokumentum alternatív verziója `author`: Az aktuális dokumentum vagy cikk szerzője `bookmark`: Állandó hivatkozás a legközelebbi ős szakaszra `external`: A hivatkozott dokumentum nem ugyanazon a webhelyen található, mint az aktuális dokumentum `help`: Hivatkozás egy kapcsolódó súgó dokumentumra `license`: Az aktuális dokumentum fő tartalmára a hivatkozott fájl szerzői jogi licenc vonatkozik `me`: Az aktuális dokumentum a hivatkozott tartalom tulajdonosát képviseli `next`: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat következő dokumentuma `nofollow`: Az aktuális dokumentum szerzője vagy kiadója nem vállal felelősséget a hivatkozott fájl tartalmáért `noreferrer`: Nem tartalmaz `Referer` fejlécet. Hasonló a `noopener` hatásához `opener`: Ha a hiperhivatkozás egy legfelső szintű böngészési kontextust hoz létre (azaz a `target` attribútum értéke `_blank`), akkor létrehoz egy segéd böngészési kontextust `prev`: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat előző dokumentuma `search`: Erőforrás-hivatkozást biztosít, amely az aktuális fájl és kapcsolódó oldalainak keresésére használható `tag`: Az aktuális dokumentumra alkalmazható címkét biztosít (amelyet a megadott cím azonosít) Megjegyzés: Csak akkor használható, ha a `href` attribútum meg van adva.
`autofocus`	`autofocus`	`boolean`	`false`
Automatikusan fókuszt kapjon-e betöltődés után.
`tabindex`	`tabIndex`	`number`	-
Az elem sorszáma a Tab billentyűvel történő navigálás során.

Név	Paraméterek	Visszatérési érték
`click`		`void`
Egérkattintás szimulálása az elemen.
`focus`	`options: FocusOptions` (Opcionális)	`void`
Fókusz állítása az aktuális elemre. Egy objektum is átadható paraméterként, a következő tulajdonságokkal: `preventScroll`: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot `true`-ra állítja, a görgetés elmarad.
`blur`		`void`
Fókusz eltávolítása az aktuális elemről.

Név
`focus`
Fókusz elnyerésekor aktiválódik.
`blur`
Fókusz elvesztésekor aktiválódik.
`submenu-open`
Az almenü nyitásának kezdetekor aktiválódik az esemény. Az `event.preventDefault()` meghívásával megakadályozható az almenü megnyitása.
`submenu-opened`
Az almenü nyitási animációjának befejezésekor aktiválódik az esemény.
`submenu-close`
Az almenü zárásának kezdetekor aktiválódik az esemény. Az `event.preventDefault()` meghívásával megakadályozható az almenü bezárása.
`submenu-closed`
Az almenü zárási animációjának befejezésekor aktiválódik az esemény.

Név
(alapértelmezett)
A menüpont szövege.
`icon`
A menüpont bal oldali ikonja.
`end-icon`
A menüpont jobb oldali ikonja.
`end-text`
A menü jobb oldali szövege.
`selected-icon`
A kiválasztott állapot ikonja.
`submenu`
Almenü.
`custom`
Bármilyen egyéni tartalom.

Név
`container`
A menüpont konténere.
`icon`
A bal oldali ikon.
`label`
Szöveges tartalom.
`end-icon`
A jobb oldali ikon.
`end-text`
A jobb oldali szöveg.
`selected-icon`
A kiválasztott állapot ikonja.
`submenu`
Az almenü elem.

Attribútum	Tulajdonság	Típus	Alapértelmezett
`selects`	`selects`	`'single' \| 'multiple'`	-
A menüpontok kiválaszthatósági állapota. Alapértelmezés szerint nem választhatók ki. Lehetséges értékek: `single`: Egy választható `multiple`: Több választható
`value`	`value`	`string \| string[]`	-
Az aktuálisan kiválasztott `<mdui-menu-item>` értéke. Megjegyzés: Ennek a tulajdonságnak a HTML attribútuma mindig karakterlánc, és csak akkor állítható be kezdeti érték HTML attribútummal, ha a `selects="single"`. Ennek a tulajdonságnak a JavaScript értéke karakterlánc, ha a `selects="single"`, és karakterláncok tömbje, ha a `selects="multiple"`. Ezért ha a `selects="multiple"`, akkor ez az érték csak a JavaScript tulajdonság módosításával változtatható meg.
`dense`	`dense`	`boolean`	`false`
A menüpontok kompakt elrendezést használjanak-e.
`submenu-trigger`	`submenuTrigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'click hover'`
Az almenü kiváltási módja, több érték is megadható szóközzel elválasztva. Lehetséges értékek: `click`: A menüpontra kattintva nyílik meg az almenü `hover`: Az egérmutatót a menüpont fölé vive nyílik meg az almenü `focus`: A menüpont fókuszálásakor nyílik meg az almenü `manual`: Csak programozottan lehet megnyitni és bezárni az almenüt, más kiváltási mód nem adható meg
`submenu-open-delay`	`submenuOpenDelay`	`number`	`200`
Az egérrel fölé vive történő almenü nyitás késleltetése, ezredmásodpercben.
`submenu-close-delay`	`submenuCloseDelay`	`number`	`200`
Az egérrel fölé vive történő almenü zárás késleltetése, ezredmásodpercben.

Név	Paraméterek	Visszatérési érték
`focus`	`options: FocusOptions` (Opcionális)	`void`
Fókusz beállítása az aktuális elemre.
`blur`		`void`
Fókusz eltávolítása az aktuális elemről.

Név
`change`
Aktiválódik, amikor a menüpont kiválasztási állapota megváltozik.

Név
(alapértelmezett)
Almenüpontok (`<mdui-menu-item>`), elválasztók (`<mdui-divider>`) stb.

Név
`--shape-corner`
A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.

Előző fejezet

List Lista

Következő fejezet

NavigationBar Navigációs sáv

MenuMenü

Használat

Példák

Kompakt elrendezés

Menüpont letiltása

Egyszerű kiválasztás támogatása

Többszörös kiválasztás támogatása

Ikon

Link

Almenü

Egyéni tartalom

`mdui-menu-item` API

Tulajdonságok

Metódusok

Események

Slots

CSS Parts

`mdui-menu` API

Tulajdonságok

Metódusok

Események

Slots

CSS egyéni tulajdonságok