<mdui-menu selects="multiple" class="example-multiple">
  <mdui-menu-item value="item-1">Élément 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Élément 2</mdui-menu-item>
  <mdui-menu-item value="item-3">Élément 3</mdui-menu-item>
</mdui-menu>

<script>
  // Présélectionner item-1 et item-2
  const menu = document.querySelector(".example-multiple");
  menu.value = ["item-1", "item-2"];
</script>

Source

Icône

Utilisez les attributs icon, end-icon et end-text sur <mdui-menu-item> pour ajouter des icônes Material Icons ou du texte à gauche/droite. Utilisez les slots correspondants pour des éléments personnalisés.

Pour réserver l'espace d'une icône à gauche sans en afficher, définissez icon sur une chaîne vide.

Élément 1

Élément 2

Ctrl+X

Élément 3

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

Source

En mode sélection, utilisez l'attribut selected-icon ou le slot selected-icon pour définir l'icône de l'état sélectionné.

Élément 1

Élément 2

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

Source

Lien

Ajoutez l'attribut href à <mdui-menu-item> pour l'utiliser comme un lien. Les attributs liés aux liens (download, target, rel) sont disponibles.

Élément 1

Élément 2

<mdui-menu>
  <mdui-menu-item href="https://www.mdui.org" target="_blank">Élément 1</mdui-menu-item>
  <mdui-menu-item>Élément 2</mdui-menu-item>
</mdui-menu>

Source

Sous-menu

Utilisez le slot submenu dans <mdui-menu-item> pour définir le contenu du sous-menu.

Hauteur de ligne Simple

1.5

Double

Personnalisé: 1.2

Style de paragraphe

<mdui-menu>
  <mdui-menu-item>
    Hauteur de ligne
    <mdui-menu-item slot="submenu">Simple</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Double</mdui-menu-item>
    <mdui-menu-item slot="submenu">Personnalisé: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Style de paragraphe</mdui-menu-item>
</mdui-menu>

Source

Utilisez l'attribut submenu-trigger sur <mdui-menu> pour définir la méthode de déclenchement du sous-menu.

Hauteur de ligne Simple

1.5

Double

Personnalisé: 1.2

Style de paragraphe

<mdui-menu submenu-trigger="click">
  <mdui-menu-item>
    Hauteur de ligne
    <mdui-menu-item slot="submenu">Simple</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Double</mdui-menu-item>
    <mdui-menu-item slot="submenu">Personnalisé: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Style de paragraphe</mdui-menu-item>
</mdui-menu>

Source

Lorsque submenu-trigger="hover", vous pouvez utiliser les attributs submenu-open-delay et submenu-close-delay pour les délais d'ouverture/fermeture.

Hauteur de ligne Simple

1.5

Double

Personnalisé: 1.2

Style de paragraphe

<mdui-menu submenu-trigger="hover" submenu-open-delay="1000" submenu-close-delay="1000">
  <mdui-menu-item>
    Hauteur de ligne
    <mdui-menu-item slot="submenu">Simple</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Double</mdui-menu-item>
    <mdui-menu-item slot="submenu">Personnalisé: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Style de paragraphe</mdui-menu-item>
</mdui-menu>

Source

Contenu personnalisé

Utilisez le slot custom de <mdui-menu-item> pour personnaliser complètement le contenu.

ABS

Valeur absolue d'un nombre

ACOS

Arccosinus d'un nombre, exprimé en radians

ACOSH

Arccosinus hyperbolique d'un nombre

<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">Valeur absolue d'un nombre</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOS</div>
      <div class="secondary">Arccosinus d'un nombre, exprimé en radians</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOSH</div>
      <div class="secondary">Arccosinus hyperbolique d'un nombre</div>
    </div>
  </mdui-menu-item>
</mdui-menu>

Source

Attribut HTML	Propriété JavaScript	Type	Défaut
`value`	`value`	`string`	-
Valeur de l'élément de menu
`disabled`	`disabled`	`boolean`	`false`
Si l'élément de menu est désactivé
`icon`	`icon`	`string`	-
Nom de l'icône Material Icons à gauche. Peut également être défini via `slot="icon"`. Si aucune icône ne doit être affichée à gauche, mais qu'un slot pour une icône doit être réservé, vous pouvez passer une chaîne vide pour l'occuper.
`end-icon`	`endIcon`	`string`	-
Nom de l'icône Material Icons à droite. Peut également être défini via `slot="end-icon"`.
`end-text`	`endText`	`string`	-
Texte à droite. Peut également être défini via `slot="end-text"`.
`selected-icon`	`selectedIcon`	`string`	-
Nom de l'icône Material Icons pour l'état sélectionné. Peut également être défini via `slot="selected-icon"`.
`submenu-open`	`submenuOpen`	`boolean`	`false`
Si le sous-menu est ouvert
`href`	`href`	`string`	-
URL cible du lien. Si cette propriété est définie, le composant sera rendu en tant qu'élément `<a>` et pourra utiliser les attributs liés aux liens.
`download`	`download`	`string`	-
Nom du fichier à télécharger. Remarque : Cette propriété ne s'applique que si l'attribut `href` est défini.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Cible d'ouverture du lien. Les valeurs possibles incluent : `_blank` : Ouvre le lien dans une nouvelle fenêtre `_parent` : Ouvre le lien dans le contexte parent `_self` : Par défaut. Ouvre le lien dans le contexte courant `_top` : Ouvre le lien dans toute la fenêtre Remarque : Cette propriété ne s'applique que si l'attribut `href` est défini.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Relation entre le document actuel et le document lié. Les valeurs possibles incluent : `alternate` : Version alternative du document actuel `author` : Auteur du document actuel ou de l'article `bookmark` : Lien permanent vers la section ancêtre la plus proche `external` : Le document référencé n'est pas sur le même site que le document actuel `help` : Lien vers un document d'aide associé `license` : Le contenu principal du document actuel est couvert par la licence de droits d'auteur du fichier référencé `me` : Le document actuel représente le propriétaire du contenu lié `next` : Le document actuel fait partie d'une série, le document référencé est le suivant dans la série `nofollow` : L'auteur ou l'éditeur du document actuel n'approuve pas le fichier référencé `noreferrer` : N'inclut pas l'en-tête `Referer`. Effet similaire à `noopener` `opener` : Si l'hyperlien crée un contexte de navigation de premier niveau (c'est-à-dire que la valeur de l'attribut `target` est `_blank`), crée un contexte de navigation auxiliaire `prev` : Le document actuel fait partie d'une série, le document référencé est le précédent dans la série `search` : Fournit un lien vers une ressource pouvant être utilisée pour rechercher le fichier actuel et ses pages associées `tag` : Fournit une balise (identifiée par l'adresse donnée) applicable au document actuel Remarque : Disponible uniquement lorsque l'attribut `href` est spécifié.
`autofocus`	`autofocus`	`boolean`	`false`
Si le focus doit être automatiquement obtenu après le chargement de la page
`tabindex`	`tabIndex`	`number`	-
Ordre de l'élément lors de la navigation au clavier avec la touche Tab

Nom	Paramètres	Valeur de retour
`click`		`void`
Simule un clic sur l'élément
`focus`	`options: FocusOptions` (Optionnel)	`void`
Place le focus sur l'élément. Vous pouvez passer un objet en paramètre, dont les propriétés incluent : `preventScroll` : Par défaut, après la prise de focus, la page défile pour amener l'élément à l'écran. Si vous ne souhaitez pas que la page défile, vous pouvez définir cette propriété sur `true`.
`blur`		`void`
Retire le focus de l'élément

Nom
`focus`
Se déclenche lorsque l'élément obtient le focus
`blur`
Se déclenche lorsque l'élément perd le focus
`submenu-open`
Se déclenche lorsque le sous-menu commence à s'ouvrir. Vous pouvez empêcher l'ouverture du sous-menu en appelant `event.preventDefault()`.
`submenu-opened`
Se déclenche lorsque l'animation d'ouverture du sous-menu est terminée.
`submenu-close`
Se déclenche lorsque le sous-menu commence à se fermer. Vous pouvez empêcher la fermeture du sous-menu en appelant `event.preventDefault()`.
`submenu-closed`
Se déclenche lorsque l'animation de fermeture du sous-menu est terminée.

Nom
Défaut
Texte de l'élément de menu
`icon`
Icône de gauche de l'élément de menu
`end-icon`
Icône de droite de l'élément de menu
`end-text`
Texte à droite de l'élément de menu
`selected-icon`
Icône de l'état sélectionné
`submenu`
Sous-menu
`custom`
Contenu personnalisé

Nom
`container`
Conteneur de l'élément de menu
`icon`
Icône de gauche
`label`
Contenu textuel
`end-icon`
Icône de droite
`end-text`
Texte de droite
`selected-icon`
Icône de l'état sélectionné
`submenu`
Élément de sous-menu

Attribut HTML	Propriété JavaScript	Type	Défaut
`selects`	`selects`	`'single' \| 'multiple'`	-
État de sélection des éléments de menu. Par défaut, non sélectionnable. Les valeurs possibles incluent : `single` : Sélection unique `multiple` : Sélection multiple
`value`	`value`	`string \| string[]`	-
Valeur de l'élément `<mdui-menu-item>` actuellement sélectionné. Remarque : L'attribut HTML de cette propriété est toujours une chaîne de caractères, et ne peut être défini comme valeur initiale via l'attribut HTML que lorsque `selects="single"`. La valeur de la propriété JavaScript est une chaîne lorsque `selects="single"`, et un tableau de chaînes lorsque `selects="multiple"`. Par conséquent, lorsque `selects="multiple"`, vous ne pouvez modifier cette valeur qu'en modifiant la valeur de la propriété JavaScript.
`dense`	`dense`	`boolean`	`false`
Si les éléments de menu doivent utiliser une disposition compacte
`submenu-trigger`	`submenuTrigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'click hover'`
Mode de déclenchement du sous-menu. Prend en charge plusieurs valeurs, séparées par des espaces. Les valeurs possibles incluent : `click` : Ouvre le sous-menu lors du clic sur l'élément de menu `hover` : Ouvre le sous-menu lors du survol de la souris sur l'élément de menu `focus` : Ouvre le sous-menu lors du focus sur l'élément de menu `manual` : Ne peut être ouvert ou fermé que par programmation, aucun autre mode de déclenchement ne peut être spécifié
`submenu-open-delay`	`submenuOpenDelay`	`number`	`200`
Délai d'ouverture du sous-menu lors du déclenchement par survol de la souris, en millisecondes.
`submenu-close-delay`	`submenuCloseDelay`	`number`	`200`
Délai de fermeture du sous-menu lors du déclenchement par survol de la souris, en millisecondes.

Nom	Paramètres	Valeur de retour
`focus`	`options: FocusOptions` (Optionnel)	`void`
Place le focus sur l'élément
`blur`		`void`
Supprime le focus de l'élément actuel

Nom
`change`
Se déclenche lorsque l'état de sélection d'un élément de menu change

Nom
Défaut
Éléments de sous-menu (`<mdui-menu-item>`), Séparateurs (`<mdui-divider>`), etc.

Nom
`--shape-corner`
Taille des coins arrondis du composant. Vous pouvez spécifier une valeur de pixel spécifique ; mais il est préférable de se référer au Design Tokens.

Chapitre précédent

List

Chapitre suivant

NavigationBar

Menu

Utilisation

Exemples

Disposition compacte

Élément de menu désactivé

Sélection unique

Sélection multiple

Icône

Lien

Sous-menu

Contenu personnalisé

`mdui-menu-item` API

Propriétés

Méthodes

Événements

Slots

CSS Parts

`mdui-menu` API

Propriétés

Méthodes

Événements

Slots

Propriétés CSS personnalisées