Statut
Component checklist
Usage
<dsa-menu-item type="link" aria-current="page" href="#">accueil</dsa-menu-item>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/menu-item/menu-item.js';
import type { DSAMenuItem } from '@ds-autonomie/web-components/';
</script>
API
Attributs et propriétés
Comment utiliser les attributs ? » Utilisation des webcomponents
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
current |
Indique si le lien représente l'item courant |
string |
- |
|
download |
(type link) Indique au navigateur que le lien est à télécharger plutôt que d'être affiché. La valeur, si spécifié est le nom du fichier à télécharger |
string |
- |
|
disabled |
Désactive le menu-item |
boolean |
false |
|
expanded |
(type="button") Ajoute un attribut aria-expanded à l'élément bouton. |
boolean |
- |
|
href |
(type link) L'URL du lien |
string |
’’ |
|
rel |
(type link) Lors de l'utilisation de href, cet attribut correspondra à l'attribut rel du lien sous-jacent. Contrairement aux liens ordinaires, la valeur par défaut est noreferrer noopener pour des raisons de sécurité. Cependant, si vous utilisez target pour pointer vers un onglet ou une fenêtre spécifique, cela empêchera le fonctionnement correct. Il faudra supprimer ou modifier la valeur par défaut avec une chaîne vide ou à une valeur de votre choix |
string |
noreferrer noopener |
|
size
|
La taille du menu-item |
small medium large |
'medium' |
|
target |
(type link) Indique au navigateur où ouvrir le lien. |
'_blank' | '_parent' | '_self' | '_top' |
- |
|
type |
Le type de menu-item. |
link button |
'button' |
|
value |
Une valeur unique à stocker dans le menu-item. Peut être utilisé comme moyen d’identifier les éléments de menu lorsqu’ils sont sélectionnés |
string |
'' |
Méthodes
Comment utiliser les méthodes ? » Utilisation des webcomponents
|
Nom |
Description |
Type |
|---|---|---|
|
getTextLabel() |
Renvoie une chaine textuel basée sur le contenu du menu-item |
() => string |
|
blur() |
Enlève le focus du menu-item |
() => void |
|
click() |
Simule un click sur le menu-item |
() => void |
|
focus() |
Met le focus sur le menu-item |
(options?: FocusOptions) => void |
Slots
Comment utiliser les slots ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
(défaut) |
Le label du menu-item |
|
prefix |
Utilisé pour ajouter une icône au début du menu-item |
|
suffix |
Utilisé pour ajouter une icône à la fin du menu-item |
Événements
Comment utiliser les événements ? » Utilisation des webcomponents
Ce composant n’émet pas d’événements.
Références
Voici la liste des références vers les composants liés :