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

<script>
  // Standardmäßig item-1 und item-2 auswählen
  const menu = document.querySelector(".example-multiple");
  menu.value = ["item-1", "item-2"];
</script>

Quellcode

Symbol

Über die Attribute icon und end-icon auf der <mdui-menu-item>-Komponente können Sie links bzw. rechts vom Menüpunkt ein Material Icons-Symbol hinzufügen. Mit dem Attribut end-text können Sie rechts Text hinzufügen. Sie können auch über die Slots icon, end-icon und end-text Elemente hinzufügen.

Wenn Sie links Platz für ein Symbol freihalten möchten, um die Ausrichtung mit anderen Menüpunkten beizubehalten, setzen Sie das Attribut icon auf einen leeren String.

Item 1

Item 2

Strg+X

Item 3

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

Quellcode

Im Einfach- oder Mehrfachauswahl-Modus können Sie das Symbol für den ausgewählten Zustand mit dem Attribut selected-icon oder dem Slot selected-icon festlegen.

Item 1

Item 2

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

Quellcode

Link

Setzen Sie das Attribut href auf der <mdui-menu-item>-Komponente, um den Menüpunkt in einen Link zu verwandeln. Sie können dann auch die Attribute download, target und rel verwenden.

Item 1

Item 2

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

Quellcode

Untermenü

In der <mdui-menu-item>-Komponente können Sie über den Slot submenu die Elemente für das Untermenü angeben.

Zeilenabstand Einfach

1,5

Doppelt

Benutzerdefiniert: 1,2

Absatzstil

<mdui-menu>
  <mdui-menu-item>
    Zeilenabstand
    <mdui-menu-item slot="submenu">Einfach</mdui-menu-item>
    <mdui-menu-item slot="submenu">1,5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Doppelt</mdui-menu-item>
    <mdui-menu-item slot="submenu">Benutzerdefiniert: 1,2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Absatzstil</mdui-menu-item>
</mdui-menu>

Quellcode

In der <mdui-menu>-Komponente können Sie mit dem Attribut submenu-trigger festlegen, wie das Untermenü ausgelöst wird.

Zeilenabstand Einfach

1,5

Doppelt

Benutzerdefiniert: 1,2

Absatzstil

<mdui-menu submenu-trigger="click">
  <mdui-menu-item>
    Zeilenabstand
    <mdui-menu-item slot="submenu">Einfach</mdui-menu-item>
    <mdui-menu-item slot="submenu">1,5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Doppelt</mdui-menu-item>
    <mdui-menu-item slot="submenu">Benutzerdefiniert: 1,2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Absatzstil</mdui-menu-item>
</mdui-menu>

Quellcode

Wenn submenu-trigger auf hover gesetzt ist, können Sie mit den Attributen submenu-open-delay und submenu-close-delay in der <mdui-menu>-Komponente die Verzögerung beim Öffnen und Schließen des Untermenüs festlegen.

Zeilenabstand Einfach

1,5

Doppelt

Benutzerdefiniert: 1,2

Absatzstil

<mdui-menu submenu-trigger="hover" submenu-open-delay="1000" submenu-close-delay="1000">
  <mdui-menu-item>
    Zeilenabstand
    <mdui-menu-item slot="submenu">Einfach</mdui-menu-item>
    <mdui-menu-item slot="submenu">1,5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Doppelt</mdui-menu-item>
    <mdui-menu-item slot="submenu">Benutzerdefiniert: 1,2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Absatzstil</mdui-menu-item>
</mdui-menu>

Quellcode

Benutzerdefinierter Inhalt

In der <mdui-menu-item>-Komponente können Sie den Slot custom verwenden, um den Inhalt des Menüpunkts vollständig anzupassen.

ABS

Gibt den absoluten Wert einer Zahl zurück

ACOS

Gibt den Arkuskosinus einer Zahl im Bogenmaß zurück

ACOSH

Gibt den Areakosinus hyperbolicus einer Zahl zurück

<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">Gibt den absoluten Wert einer Zahl zurück</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOS</div>
      <div class="secondary">Gibt den Arkuskosinus einer Zahl im Bogenmaß zurück</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOSH</div>
      <div class="secondary">Gibt den Areakosinus hyperbolicus einer Zahl zurück</div>
    </div>
  </mdui-menu-item>
</mdui-menu>

Quellcode

Attribut	Property	Typ	Standard
`value`	`value`	`string`	-
Der Wert des Menüpunkts.
`disabled`	`disabled`	`boolean`	`false`
Deaktiviert den Menüpunkt.
`icon`	`icon`	`string`	-
Gibt den Namen des Material Icons für das linke Icon an. Alternativ können Sie `slot="icon"` verwenden. Eine leere Zeichenfolge reserviert Platz für ein Icon.
`end-icon`	`endIcon`	`string`	-
Gibt den Namen des Material Icons für das rechte Icon an. Alternativ können Sie `slot="end-icon"` verwenden.
`end-text`	`endText`	`string`	-
Gibt den rechten Text an. Alternativ können Sie `slot="end-text"` verwenden.
`selected-icon`	`selectedIcon`	`string`	-
Gibt den Namen des Material Icons für den ausgewählten Zustand an. Alternativ können Sie `slot="selected-icon"` verwenden.
`submenu-open`	`submenuOpen`	`boolean`	`false`
Öffnet das Untermenü.
`href`	`href`	`string`	-
Die URL für den Link. Wenn gesetzt, wird die Komponente als `<a>`-Element gerendert und unterstützt Link-bezogene Attribute.
`download`	`download`	`string`	-
Lädt die verlinkte URL herunter. Hinweis: Nur verfügbar, wenn `href` angegeben ist.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Legt fest, wo die verlinkte URL geöffnet wird. Mögliche Werte: `_blank`: Öffnet in einem neuen Tab oder Fenster. `_parent`: Öffnet im übergeordneten Browsing-Kontext oder `_self`, wenn kein übergeordneter Kontext vorhanden ist. `_self`: Öffnet im aktuellen Browsing-Kontext (Standard). `_top`: Öffnet im obersten Browsing-Kontext oder `_self`, wenn kein übergeordneter Kontext vorhanden ist. Hinweis: Nur verfügbar, wenn `href` angegeben ist.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Gibt die Beziehung der verlinkten URL als durch Leerzeichen getrennte Link-Typen an. Mögliche Werte: `alternate`: Eine alternative Version des aktuellen Dokuments. `author`: Der Autor des aktuellen Dokuments oder Artikels. `bookmark`: Der Permalink des übergeordneten Abschnitts. `external`: Das referenzierte Dokument ist nicht Teil derselben Website wie das aktuelle Dokument. `help`: Ein Link zu kontextsensitiver Hilfe. `license`: Inhalt, der durch die im referenzierten Dokument beschriebene Urheberrechtslizenz abgedeckt ist. `me`: Links zu Inhalten, die dem Autor des aktuellen Dokuments gehören. `next`: Das nächste Dokument in der Serie. `nofollow`: Gibt an, dass der ursprüngliche Autor oder Herausgeber des aktuellen Dokuments das referenzierte Dokument nicht unterstützt. `noreferrer`: Verhindert das Senden des `Referer`-Headers. Hat die gleiche Wirkung wie `noopener`. `opener`: Erstellt einen neuen Browsing-Kontext, wenn der Hyperlink ansonsten in einem obersten Kontext geöffnet würde, der nicht sekundär ist (z. B. wenn `target="_blank"` angegeben ist). `prev`: Das vorherige Dokument in der Serie. `search`: Links zu einer Ressource, die verwendet werden kann, um im aktuellen Dokument und seinen verwandten Seiten zu suchen. `tag`: Markiert das aktuelle Dokument mit dem angegebenen Tag. Hinweis: Nur verfügbar, wenn `href` angegeben ist.
`autofocus`	`autofocus`	`boolean`	`false`
Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
`tabindex`	`tabIndex`	`number`	-
Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.

Name	Parameter	Rückgabewert
`click`		`void`
Simuliert einen Mausklick auf das Element.
`focus`	`options: FocusOptions` (Optional)	`void`
Setzt den Fokus auf das Element. Der optionale Objektparameter kann eine `preventScroll`-Eigenschaft enthalten. Wenn `preventScroll` auf `true` gesetzt ist, scrollt die Seite nicht, um das fokussierte Element in den sichtbaren Bereich zu bringen.
`blur`		`void`
Entfernt den Fokus vom Element.

Name
`focus`
Wird ausgelöst, wenn der Menüpunkt den Fokus erhält.
`blur`
Wird ausgelöst, wenn der Menüpunkt den Fokus verliert.
`submenu-open`
Wird ausgelöst, wenn das Untermenü beginnt, sich zu öffnen. Kann mit `event.preventDefault()` verhindert werden.
`submenu-opened`
Wird ausgelöst, nachdem das Untermenü geöffnet wurde und die Animationen abgeschlossen sind.
`submenu-close`
Wird ausgelöst, wenn das Untermenü beginnt, sich zu schließen. Kann mit `event.preventDefault()` verhindert werden.
`submenu-closed`
Wird ausgelöst, nachdem das Untermenü geschlossen wurde und die Animationen abgeschlossen sind.

Name
Standard
Menüpunkt-Text.
`icon`
Linkes Icon.
`end-icon`
Rechtes Icon.
`end-text`
Rechter Text.
`selected-icon`
Icon für den ausgewählten Zustand.
`submenu`
Untermenü.
`custom`
Beliebiger benutzerdefinierter Inhalt.

Name
`container`
Container des Menüpunkts.
`icon`
Linkes Icon.
`label`
Textinhalt.
`end-icon`
Rechtes Icon.
`end-text`
Rechter Text.
`selected-icon`
Icon für den ausgewählten Zustand.
`submenu`
Untermenü-Punkt.

Attribut	Property	Typ	Standard
`selects`	`selects`	`'single' \| 'multiple'`	-
Steuert, ob Menüpunkte ausgewählt werden können. Standardmäßig sind sie nicht auswählbar. Mögliche Werte: `single`: Es kann jeweils nur ein Menüpunkt ausgewählt werden. `multiple`: Es können mehrere Menüpunkte ausgewählt werden.
`value`	`value`	`string \| string[]`	-
Der Wert des ausgewählten `<mdui-menu-item>`. Hinweis: Das HTML-Attribut akzeptiert immer eine Zeichenfolge und kann nur als Anfangswert verwendet werden, wenn `selects="single"`. Die JavaScript-Eigenschaft ist eine Zeichenfolge, wenn `selects="single"`, und ein Array von Zeichenfolgen, wenn `selects="multiple"`. Wenn `selects="multiple"`, aktualisieren Sie die JavaScript-Eigenschaft, um diesen Wert zu ändern.
`dense`	`dense`	`boolean`	`false`
Gibt an, ob die Menüpunkte ein kompaktes Layout verwenden.
`submenu-trigger`	`submenuTrigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'click hover'`
Definiert, wie Untermenüs geöffnet werden. Mehrere durch Leerzeichen getrennte Werte werden unterstützt. Mögliche Werte: `click`: Öffnet das Untermenü, wenn auf den Menüpunkt geklickt wird. `hover`: Öffnet das Untermenü, wenn mit der Maus über einen Menüpunkt gefahren wird. `focus`: Öffnet das Untermenü, wenn der Menüpunkt den Fokus erhält. `manual`: Untermenüs können nur programmgesteuert geöffnet und geschlossen werden; es können keine anderen Auslösemethoden angegeben werden.
`submenu-open-delay`	`submenuOpenDelay`	`number`	`200`
Die Verzögerung (in Millisekunden), bevor ein Untermenü bei Mouseover geöffnet wird.
`submenu-close-delay`	`submenuCloseDelay`	`number`	`200`
Die Verzögerung (in Millisekunden), bevor ein Untermenü bei Mouseover geschlossen wird.

Name	Parameter	Rückgabewert
`focus`	`options: FocusOptions` (Optional)	`void`
Setzt den Fokus auf das Element.
`blur`		`void`
Entfernt den Fokus vom Element.

Name
`change`
Wird ausgelöst, wenn sich der ausgewählte Zustand von Menüpunkten ändert.

Name
Standard
Untermenü-Punkte (`<mdui-menu-item>`), Trennlinien (`<mdui-divider>`) und andere Elemente.

Name
`--shape-corner`
Der Eckradius der Komponente. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.

Vorherige Seite

List

Nächste Seite

NavigationBar

Menu

Verwendung

Beispiele

Kompaktes Layout

Deaktivierte Menüpunkte

Einfachauswahl unterstützen

Mehrfachauswahl unterstützen

Symbol

Link

Untermenü

Benutzerdefinierter Inhalt

`mdui-menu-item` API

Eigenschaften

Methoden

Ereignisse

Slots

CSS Parts

`mdui-menu` API

Eigenschaften

Methoden

Ereignisse

Slots

CSS Custom Property