MenuNabídka

Nabídka zobrazuje svisle uspořádané možnosti a otevírá se po interakci s tlačítkem nebo jiným ovládacím prvkem.

Pokud potřebujete implementovat rozbalovací nabídku, můžete použít komponentu <mdui-dropdown>.

Způsob použití

Importujte komponenty podle potřeby:

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

Importujte TypeScript typy komponent podle potřeby:

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

Příklad použití:

Položka 1

Položka 2

<mdui-menu>
  <mdui-menu-item>Položka 1</mdui-menu-item>
  <mdui-menu-item>Položka 2</mdui-menu-item>
</mdui-menu>

Nastavením atributu selects="single" na komponentě <mdui-menu> zapnete režim jednoho výběru. Hodnota value komponenty <mdui-menu> je pak hodnotou value aktuálně vybrané komponenty <mdui-menu-item>.

Položka 1

Položka 2

<mdui-menu selects="single" value="item-2">
  <mdui-menu-item value="item-1">Položka 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Položka 2</mdui-menu-item>
</mdui-menu>

Zdrojový kód

Podpora více výběru

Nastavením atributu selects="multiple" na komponentě <mdui-menu> zapnete režim vícenásobného výběru. Hodnota value komponenty <mdui-menu> je pak pole hodnot value aktuálně vybraných komponent <mdui-menu-item>.

Poznámka: V režimu vícenásobného výběru je hodnota value komponenty <mdui-menu> pole a lze ji číst i nastavovat pouze pomocí JavaScript vlastnosti.

Položka 1

Položka 2

Položka 3

<mdui-menu selects="multiple" class="example-multiple">
  <mdui-menu-item value="item-1">Položka 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Položka 2</mdui-menu-item>
  <mdui-menu-item value="item-3">Položka 3</mdui-menu-item>
</mdui-menu>

<script>
  // Nastavit výchozí výběr item-1 a item-2
  const menu = document.querySelector(".example-multiple");
  menu.value = ["item-1", "item-2"];
</script>

Zdrojový kód

Ikona

Na komponentě <mdui-menu-item> můžete pomocí atributů icon a end-icon přidat ikony Material Icons na levou a pravou stranu položky nabídky. Pomocí atributu end-text můžete přidat text na pravou stranu. Kromě toho můžete také přidat ikony a text na levou a pravou stranu položky nabídky pomocí slotů icon, end-icon a end-text.

Pokud potřebujete ponechat prázdné místo pro ikonu na levé straně položky nabídky pro zachování zarovnání s ostatními položkami nabídky, můžete atribut icon nastavit na prázdný řetězec.

Položka 1

Položka 2

Ctrl+X

Položka 3

<mdui-menu>
  <mdui-menu-item icon="visibility" end-icon="add_circle" end-text="Ctrl+X">Položka 1</mdui-menu-item>
  <mdui-menu-item>
    Položka 2
    <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="">Položka 3</mdui-menu-item>
</mdui-menu>

Zdrojový kód

V režimu jednoho či vícenásobného výběru můžete pomocí atributu selected-icon nebo slotu selected-icon nastavit ikonu vybraného stavu.

Položka 1

Položka 2

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

Zdrojový kód

Odkaz

Nastavením atributu href na komponentě <mdui-menu-item> změníte položku nabídky na odkaz. Pak můžete také použít atributy související s odkazy: download, target, rel.

Položka 1

Položka 2

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

Zdrojový kód

Podnabídka

V komponentě <mdui-menu-item> můžete použít slot submenu k určení prvků položek podnabídky.

Řádkování Jednoduché

1,5

Dvojité

Vlastní: 1,2

Styl odstavce

<mdui-menu>
  <mdui-menu-item>
    Řádkování
    <mdui-menu-item slot="submenu">Jednoduché</mdui-menu-item>
    <mdui-menu-item slot="submenu">1,5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Dvojité</mdui-menu-item>
    <mdui-menu-item slot="submenu">Vlastní: 1,2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Styl odstavce</mdui-menu-item>
</mdui-menu>

Zdrojový kód

Na komponentě <mdui-menu> můžete pomocí atributu submenu-trigger nastavit způsob spuštění podnabídky.

Řádkování Jednoduché

1,5

Dvojité

Vlastní: 1,2

Styl odstavce

<mdui-menu submenu-trigger="click">
  <mdui-menu-item>
    Řádkování
    <mdui-menu-item slot="submenu">Jednoduché</mdui-menu-item>
    <mdui-menu-item slot="submenu">1,5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Dvojité</mdui-menu-item>
    <mdui-menu-item slot="submenu">Vlastní: 1,2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Styl odstavce</mdui-menu-item>
</mdui-menu>

Zdrojový kód

Když je atribut submenu-trigger nastaven na hover, můžete na komponentě <mdui-menu> pomocí atributů submenu-open-delay a submenu-close-delay nastavit zpoždění otevření a zavření podnabídky.

Řádkování Jednoduché

1,5

Dvojité

Vlastní: 1,2

Styl odstavce

<mdui-menu submenu-trigger="hover" submenu-open-delay="1000" submenu-close-delay="1000">
  <mdui-menu-item>
    Řádkování
    <mdui-menu-item slot="submenu">Jednoduché</mdui-menu-item>
    <mdui-menu-item slot="submenu">1,5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Dvojité</mdui-menu-item>
    <mdui-menu-item slot="submenu">Vlastní: 1,2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Styl odstavce</mdui-menu-item>
</mdui-menu>

Zdrojový kód

Vlastní obsah

V komponentě <mdui-menu-item> můžete pomocí slotu custom zcela přizpůsobit obsah položky nabídky.

ABS

Vrátí absolutní hodnotu čísla

ACOS

Vrátí arkus kosinus čísla v radiánech

ACOSH

Vrátí hyperbolický arkus kosinus čísla

<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">Vrátí absolutní hodnotu čísla</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOS</div>
      <div class="secondary">Vrátí arkus kosinus čísla v radiánech</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOSH</div>
      <div class="secondary">Vrátí hyperbolický arkus kosinus čísla</div>
    </div>
  </mdui-menu-item>
</mdui-menu>

Zdrojový kód

Atribut	Vlastnost	Typ	Výchozí
`value`	`value`	`string`	-
Hodnota položky nabídky.
`disabled`	`disabled`	`boolean`	`false`
Určuje, zda je položka nabídky zakázaná.
`icon`	`icon`	`string`	-
Název ikony z knihovny Material Icons na levé straně. Lze také nastavit pomocí `slot="icon"`. Pokud ikonu nechcete zobrazit, ale zachovat pro ni místo vlevo, můžete použít prázdný řetězec jako zástupný symbol.
`end-icon`	`endIcon`	`string`	-
Název ikony z knihovny Material Icons na pravé straně. Lze také nastavit pomocí `slot="end-icon"`.
`end-text`	`endText`	`string`	-
Text na pravé straně. Lze také nastavit pomocí `slot="end-text"`.
`selected-icon`	`selectedIcon`	`string`	-
Název ikony z knihovny Material Icons pro vybraný stav. Lze také nastavit pomocí `slot="selected-icon"`.
`submenu-open`	`submenuOpen`	`boolean`	`false`
Určuje, zda je otevřena podnabídka.
`href`	`href`	`string`	-
Cílová URL odkazu. Pokud je tato vlastnost nastavena, komponenta se interně vykreslí jako prvek `<a>` a zpřístupní se vlastnosti pro odkazy.
`download`	`download`	`string`	-
Soubor ke stažení. Poznámka: Platí pouze, pokud je nastaven atribut `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Způsob otevření odkazu. Možné hodnoty: `_blank`: Otevře odkaz v novém okně nebo kartě. `_parent`: Otevře odkaz v nadřazeném okně. `_self`: Výchozí možnost. Otevře odkaz ve stejném okně. `_top`: Otevře odkaz v celém okně. Poznámka: Platí pouze, pokud je nastaven atribut `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Vztah mezi aktuálním dokumentem a odkazovaným dokumentem. Možné hodnoty: `alternate`: Alternativní verze aktuálního dokumentu. `author`: Autor aktuálního dokumentu nebo článku. `bookmark`: Trvalý odkaz na konkrétní část dokumentu. `external`: Odkaz vede na externí zdroj (mimo aktuální web/doménu). `help`: Odkaz na související nápovědu. `license`: Hlavní obsah aktuálního dokumentu je pokryt licencí odkazovaného dokumentu. `me`: Odkaz směřuje na profil vlastníka (rel="me"). `next`: Aktuální dokument je součástí série a odkazovaný dokument je následující v sérii. `nofollow`: Autor nebo vydavatel aktuálního dokumentu neschvaluje odkazovaný dokument. `noreferrer`: Neodesílá HTTP hlavičku `Referer`. Má podobný účinek jako `noopener`. `opener`: Pokud má odkaz atribut `target="_blank"`, atribut `rel="opener"` určuje, zda nové okno nebo karta bude mít přístup k původnímu oknu přes `window.opener`. `prev`: Aktuální dokument je součástí série a odkazovaný dokument je předchozí v sérii. `search`: Odkazuje na vyhledávací zdroj pro aktuální dokument a související stránky. `tag`: Poskytuje štítek vhodný pro aktuální dokument (identifikovaný danou adresou). Poznámka: Dostupné pouze při zadání atributu `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
`tabindex`	`tabIndex`	`number`	-
Pořadí prvku při přepínání fokusu pomocí klávesy Tab.

Název	Parametry	Vrací
`click`		`void`
Simuluje kliknutí myší na prvek.
`focus`	`options: FocusOptions` (Volitelné)	`void`
Nastaví fokus na aktuální prvek. Lze předat objekt jako parametr s vlastnostmi: `preventScroll`: Ve výchozím nastavení se po získání fokusu stránka posune tak, aby byl prvek viditelný. Pokud nechcete, aby se stránka posouvala, nastavte tuto vlastnost na `true`.
`blur`		`void`
Odebere fokus z aktuálního prvku.

Název
`focus`
Spustí se při získání fokusu.
`blur`
Spustí se při ztrátě fokusu.
`submenu-open`
Spustí se na začátku otevírání podnabídky. Otevření lze zabránit voláním `event.preventDefault()`.
`submenu-opened`
Spustí se po dokončení animace otevření podnabídky.
`submenu-close`
Spustí se na začátku zavírání podnabídky. Zavření lze zabránit voláním `event.preventDefault()`.
`submenu-closed`
Spustí se po dokončení animace zavření podnabídky.

Název
(výchozí)
Text položky nabídky.
`icon`
Ikona na levé straně položky nabídky.
`end-icon`
Ikona na pravé straně položky nabídky.
`end-text`
Text na pravé straně položky nabídky.
`selected-icon`
Ikona pro vybraný stav.
`submenu`
Podnabídka.
`custom`
Libovolný vlastní obsah.

Název
`container`
Kontejner položky nabídky.
`icon`
Ikona na levé straně.
`label`
Textový obsah.
`end-icon`
Ikona na pravé straně.
`end-text`
Text na pravé straně.
`selected-icon`
Ikona pro vybraný stav.
`submenu`
Prvek podnabídky.

Atribut	Vlastnost	Typ	Výchozí
`selects`	`selects`	`'single' \| 'multiple'`	-
Režim výběru položek nabídky. Výchozí: výběr není povolen. Možné hodnoty: `single`: Jednotlivý výběr. `multiple`: Vícenásobný výběr.
`value`	`value`	`string \| string[]`	-
Hodnota aktuálně vybraného prvku `<mdui-menu-item>`. Poznámka: HTML atribut této vlastnosti je vždy řetězec a počáteční hodnotu lze nastavit pomocí HTML atributu pouze pokud je `selects="single"`. Hodnota JavaScriptové vlastnosti je řetězec, pokud je `selects="single"`, a pole řetězců, pokud je `selects="multiple"`. Proto, pokud je `selects="multiple"`, lze tuto hodnotu změnit pouze úpravou JavaScriptové vlastnosti.
`dense`	`dense`	`boolean`	`false`
Určuje, zda položky nabídky používají kompaktní rozložení.
`submenu-trigger`	`submenuTrigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'click hover'`
Způsob spuštění podnabídky. Lze zadat více hodnot oddělených mezerami. Možné hodnoty: `click`: Otevře podnabídku po kliknutí na položku nabídky. `hover`: Otevře podnabídku po najetí myší na položku nabídky. `focus`: Otevře podnabídku po získání fokusu položkou nabídky. `manual`: Podnabídku lze otevřít a zavřít pouze programově. Nelze kombinovat s jiným způsobem spuštění.
`submenu-open-delay`	`submenuOpenDelay`	`number`	`200`
Zpoždění (v ms) před otevřením podnabídky při najetí myší.
`submenu-close-delay`	`submenuCloseDelay`	`number`	`200`
Zpoždění (v ms) před zavřením podnabídky při najetí myší.

Název	Parametry	Vrací
`focus`	`options: FocusOptions` (Volitelné)	`void`
Nastaví fokus na aktuální prvek.
`blur`		`void`
Odebere fokus z aktuálního prvku.

Název
`change`
Spustí se při změně stavu výběru položky nabídky.

Název
(výchozí)
Prvky jako položky podnabídky (`<mdui-menu-item>`), oddělovače (`<mdui-divider>`) atd.

Název
`--shape-corner`
Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.

Předchozí kapitola

List Seznam

Další kapitola

NavigationBar Navigační lišta

MenuNabídka

Způsob použití

Příklady

Kompaktní rozvržení

Zakázaná položka nabídky

Podpora jednoho výběru

Podpora více výběru

Ikona

Odkaz

Podnabídka

Vlastní obsah

`mdui-menu-item` API

Vlastnosti

Metody

Události

Slots

CSS Parts

`mdui-menu` API

Vlastnosti

Metody

Události

Slots

CSS Custom Properties