MenuMenu

Menu wyświetla listę opcji ułożonych w pionie. Menu pojawia się po kliknięciu z przyciskiem lub inną kontrolką.

Jeśli potrzebujesz zaimplementować menu rozwijane, możesz użyć komponentu <mdui-dropdown>.

Sposób użycia

Zaimportuj komponenty:

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

Zaimportuj typy TypeScript komponentów:

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

Przykład użycia:

Pozycja 1

Pozycja 2

<mdui-menu>
  <mdui-menu-item>Pozycja 1</mdui-menu-item>
  <mdui-menu-item>Pozycja 2</mdui-menu-item>
</mdui-menu>

Ustawienie atrybutu selects na single w komponencie <mdui-menu> umożliwia pojedynczy wybór. Wartość value komponentu <mdui-menu> jest wtedy równa wartości value zaznaczonego <mdui-menu-item>.

Pozycja 1

Pozycja 2

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

Źródło

Obsługa wielokrotnego wyboru

Ustawienie atrybutu selects na multiple w komponencie <mdui-menu> umożliwia wielokrotny wybór. Wartość value komponentu <mdui-menu> jest wtedy tablicą wartości value zaznaczonych <mdui-menu-item>.

Uwaga: W trybie wielokrotnego wyboru, wartość value komponentu <mdui-menu> jest tablicą i może być odczytywana i ustawiana tylko za pomocą właściwości JavaScript.

Pozycja 1

Pozycja 2

Pozycja 3

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

<script>
  // Ustaw domyślnie zaznaczone item-1 i item-2
  const menu = document.querySelector(".example-multiple");
  menu.value = ["item-1", "item-2"];
</script>

Źródło

Ikona

Na komponencie <mdui-menu-item> możesz użyć atrybutów icon i end-icon, aby dodać ikony Material Icons odpowiednio po lewej i prawej stronie elementu menu. Użyj atrybutu end-text, aby dodać tekst po prawej stronie. Możesz również użyć slotów icon, end-icon i end-text do dodania ikon i tekstu.

Jeśli chcesz pozostawić puste miejsce po lewej stronie elementu menu, aby zachować wyrównanie z innymi elementami, możesz ustawić atrybut icon na pusty ciąg znaków.

Pozycja 1

Pozycja 2

Ctrl+X

Pozycja 3

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

Źródło

W trybie pojedynczego lub wielokrotnego wyboru możesz ustawić ikonę stanu zaznaczenia za pomocą atrybutu selected-icon lub slotu selected-icon.

Pozycja 1

Pozycja 2

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

Źródło

Link

Ustawienie atrybutu href na komponencie <mdui-menu-item> zmienia element menu w link. Dodatkowo możesz użyć atrybutów związanych z linkami: download, target, rel.

Pozycja 1

Pozycja 2

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

Źródło

Podmenu

W komponencie <mdui-menu-item> możesz użyć slotu submenu, aby określić elementy podmenu.

Odstępy między wierszami Pojedynczy

1,5

Podwójny

Niestandardowy: 1,2

Styl akapitu

<mdui-menu>
  <mdui-menu-item>
    Odstępy między wierszami
    <mdui-menu-item slot="submenu">Pojedynczy</mdui-menu-item>
    <mdui-menu-item slot="submenu">1,5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Podwójny</mdui-menu-item>
    <mdui-menu-item slot="submenu">Niestandardowy: 1,2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Styl akapitu</mdui-menu-item>
</mdui-menu>

Źródło

Na komponencie <mdui-menu> możesz ustawić sposób wyzwalania podmenu za pomocą atrybutu submenu-trigger.

Odstępy między wierszami Pojedynczy

1,5

Podwójny

Niestandardowy: 1,2

Styl akapitu

<mdui-menu submenu-trigger="click">
  <mdui-menu-item>
    Odstępy między wierszami
    <mdui-menu-item slot="submenu">Pojedynczy</mdui-menu-item>
    <mdui-menu-item slot="submenu">1,5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Podwójny</mdui-menu-item>
    <mdui-menu-item slot="submenu">Niestandardowy: 1,2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Styl akapitu</mdui-menu-item>
</mdui-menu>

Źródło

Gdy submenu-trigger jest ustawiony na hover, możesz ustawić opóźnienie otwierania i zamykania podmenu za pomocą atrybutów submenu-open-delay i submenu-close-delay na komponencie <mdui-menu>.

Odstępy między wierszami Pojedynczy

1,5

Podwójny

Niestandardowy: 1,2

Styl akapitu

<mdui-menu submenu-trigger="hover" submenu-open-delay="1000" submenu-close-delay="1000">
  <mdui-menu-item>
    Odstępy między wierszami
    <mdui-menu-item slot="submenu">Pojedynczy</mdui-menu-item>
    <mdui-menu-item slot="submenu">1,5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Podwójny</mdui-menu-item>
    <mdui-menu-item slot="submenu">Niestandardowy: 1,2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Styl akapitu</mdui-menu-item>
</mdui-menu>

Źródło

Niestandardowa treść

W komponencie <mdui-menu-item> możesz użyć slotu custom, aby całkowicie dostosować treść elementu menu.

ABS

Zwraca wartość bezwzględną liczby

ACOS

Arcus cosinus liczby, w radianach

ACOSH

Arcus cosinus hiperboliczny liczby

<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">Zwraca wartość bezwzględną liczby</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOS</div>
      <div class="secondary">Arcus cosinus liczby, w radianach</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOSH</div>
      <div class="secondary">Arcus cosinus hiperboliczny liczby</div>
    </div>
  </mdui-menu-item>
</mdui-menu>

Źródło

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`value`	`value`	`string`	-
Wartość elementu menu
`disabled`	`disabled`	`boolean`	`false`
Określa, czy element menu jest wyłączony.
`icon`	`icon`	`string`	-
Nazwa ikony Material Icons po lewej stronie. Można również ustawić za pomocą `slot="icon"` Jeśli po lewej stronie nie ma być wyświetlana ikona, ale trzeba zarezerwować miejsce na ikonę, można przekazać pusty ciąg znaków jako placeholder
`end-icon`	`endIcon`	`string`	-
Nazwa ikony Material Icons po prawej stronie. Można również ustawić za pomocą `slot="end-icon"`
`end-text`	`endText`	`string`	-
Tekst po prawej stronie. Można również ustawić za pomocą `slot="end-text"`
`selected-icon`	`selectedIcon`	`string`	-
Nazwa ikony Material Icons dla stanu zaznaczonego. Można również ustawić za pomocą `slot="selected-icon"`
`submenu-open`	`submenuOpen`	`boolean`	`false`
Określa, czy otworzyć podmenu.
`href`	`href`	`string`	-
Docelowy adres URL łącza. Jeśli atrybut jest ustawiony, komponent jest renderowany jako element `<a>`, co umożliwia korzystanie z atrybutów dotyczących łączy.
`download`	`download`	`string`	-
Nazwa pliku do pobrania. Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Sposób otwarcia łącza. Dozwolone wartości: `_blank`: Otwiera w nowym oknie `_parent`: Otwiera w oknie nadrzędnym `_self`: Otwiera w bieżącej ramce `_top`: Otwiera w całym oknie Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Relacja między bieżącym dokumentem a dokumentem, do którego prowadzi łącze. Dozwolone wartości: `alternate`: Alternatywna wersja bieżącego dokumentu `author`: Autor bieżącego dokumentu lub artykułu `bookmark`: Stałe łącze do najbliższej sekcji nadrzędnej `external`: Dokument, do którego prowadzi łącze, nie znajduje się w tej samej witrynie co bieżący dokument `help`: Łącze do powiązanej dokumentacji pomocy `license`: Główna treść bieżącego dokumentu jest objęta prawami autorskimi dołączonego pliku `me`: Bieżący dokument reprezentuje właściciela treści, do której prowadzi łącze `next`: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest następnym dokumentem w tej sekwencji `nofollow`: Autor lub wydawca bieżącego dokumentu nie rekomenduje dokumentu, do którego prowadzi łącze `noreferrer`: Pomija nagłówek `Referer`. Efekt podobny do `noopener` `opener`: Jeśli hiperłącze utworzy kontekst przeglądania najwyższego poziomu (tj. wartość atrybutu `target` to `_blank`), tworzy podrzędny kontekst przeglądania `prev`: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest poprzednim dokumentem w tej sekwencji `search`: Zawiera łącze do zasobu umożliwiającego przeszukiwanie bieżącego pliku i powiązanych z nim stron `tag`: Zawiera znacznik (identyfikowany przez podany adres) mający zastosowanie do bieżącego dokumentu Uwaga: Dostępne tylko wtedy, gdy określono atrybut `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
`tabindex`	`tabIndex`	`number`	-
Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).

Nazwa	Parametry	Zwraca
`click`		`void`
Symuluje kliknięcie myszą na elemencie
`focus`	`options: FocusOptions` (Opcjonalny)	`void`
Przenosi fokus na bieżący element. Można przekazać obiekt jako parametr, którego właściwości obejmują: `preventScroll`: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na `true`.
`blur`		`void`
Usuwa fokus z bieżącego elementu

Nazwa
`focus`
Wywoływane po otrzymaniu fokusu
`blur`
Wywoływane po utracie fokusu
`submenu-open`
Wywoływane przed otwarciem podmenu. Można zapobiec otwarciu, wywołując `event.preventDefault()`
`submenu-opened`
Wywoływane po zakończeniu animacji otwierania podmenu
`submenu-close`
Wywoływane przed zamknięciem podmenu. Można zapobiec zamknięciu, wywołując `event.preventDefault()`
`submenu-closed`
Wywoływane po zakończeniu animacji zamykania podmenu

Nazwa
(domyślny)
Tekst elementu menu
`icon`
Ikona po lewej stronie elementu menu
`end-icon`
Ikona po prawej stronie elementu menu
`end-text`
Tekst po prawej stronie elementu menu
`selected-icon`
Ikona dla stanu zaznaczonego
`submenu`
Podmenu
`custom`
Dowolna niestandardowa treść

Nazwa
`container`
Kontener elementu menu
`icon`
Ikona po lewej stronie
`label`
Treść tekstowa
`end-icon`
Ikona po prawej stronie
`end-text`
Tekst po prawej stronie
`selected-icon`
Ikona dla stanu zaznaczonego
`submenu`
Element podmenu

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`selects`	`selects`	`'single' \| 'multiple'`	-
Stan zaznaczalności elementów menu. Domyślnie niezaznaczalne. Dozwolone wartości: `single`: Pojedynczy wybór `multiple`: Wielokrotny wybór
`value`	`value`	`string \| string[]`	-
Wartość aktualnie zaznaczonego `<mdui-menu-item>`. Uwaga: Atrybut HTML tej właściwości jest zawsze ciągiem znaków i można ustawić wartość początkową przez atrybut HTML tylko wtedy, gdy `selects="single"`; wartość właściwości JavaScript jest ciągiem znaków, gdy `selects="single"`, a tablicą ciągów znaków, gdy `selects="multiple"`. Dlatego, gdy `selects="multiple"`, aby zmienić tę wartość, można to zrobić tylko poprzez modyfikację wartości właściwości JavaScript.
`dense`	`dense`	`boolean`	`false`
Określa, czy elementy menu mają używać zwartego układu.
`submenu-trigger`	`submenuTrigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'click hover'`
Sposób wyzwalania podmenu. Obsługuje wiele wartości oddzielonych spacjami. Dozwolone wartości: `click`: Otwiera podmenu po kliknięciu elementu menu `hover`: Otwiera podmenu po najechaniu myszą na element menu `focus`: Otwiera podmenu po otrzymaniu fokusu na elemencie menu `manual`: Można otwierać i zamykać podmenu tylko programowo, nie można określić innych sposobów wyzwalania
`submenu-open-delay`	`submenuOpenDelay`	`number`	`200`
Opóźnienie otwarcia podmenu po najechaniu myszą, w milisekundach
`submenu-close-delay`	`submenuCloseDelay`	`number`	`200`
Opóźnienie zamknięcia podmenu po najechaniu myszą, w milisekundach

Nazwa	Parametry	Zwraca
`focus`	`options: FocusOptions` (Opcjonalny)	`void`
Przenosi fokus na bieżący element
`blur`		`void`
Usuwa fokus z bieżącego elementu

Nazwa
`change`
Wywoływane po zmianie stanu zaznaczenia elementu menu

Nazwa
(domyślny)
Elementy podmenu (`<mdui-menu-item>`), separatory (`<mdui-divider>`) itp.

Nazwa
`--shape-corner`
Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych

Poprzedni rozdział

List Lista

Następny rozdział

NavigationBar Pasek nawigacji

MenuMenu

Sposób użycia

Przykłady

Kompaktowy układ

Wyłączony element menu

Obsługa pojedynczego wyboru

Obsługa wielokrotnego wyboru

Ikona

Link

Podmenu

Niestandardowa treść

`mdui-menu-item` API

Właściwości

Metody

Zdarzenia

Slots

CSS Parts

`mdui-menu` API

Właściwości

Metody

Zdarzenia

Slots

Właściwości niestandardowe CSS