merisia-link
<merisia-link>Lien accessible avec détection automatique des liens externes (icône + texte SR) et indication pour les nouveaux onglets.
Démos
Lien interne (pas d'icône)
<merisia-link href="./input.html">Page merisia-input</merisia-link>Lien externe (icône automatique)
L'icône de lien externe est affichée automatiquement quand l'URL est d'une autre origine que la page courante.
<!-- L'icône ↗ s'affiche automatiquement pour les liens externes -->
<merisia-link href="https://design-system.service.gov.uk/">
GOV.UK Design System
</merisia-link>Nouvel onglet (texte SR automatique)
noopener noreferrer
est ajouté automatiquement pour
target="_blank".
<merisia-link href="https://example.com" target="_blank">
Ouvrir dans un nouvel onglet
</merisia-link>
<!-- Résultat : rel="noopener noreferrer" + texte SR "(s'ouvre dans un nouvel onglet)" -->Propriétés
| Propriété | Attribut | Type | Défaut | Description |
|---|---|---|---|---|
| MerisiaLink (propres) | ||||
| href | href | string | '' | URL de destination du lien |
| target | target | '_self' | '_blank' | '_parent' | '_top' | '_self' |
Cible d'ouverture ; _blank ajoute
noopener noreferrer automatiquement
|
| rel | rel | string | '' |
Attribut rel (complété automatiquement pour
target="_blank")
|
| newTabText | new-tab-text | string | "(s'ouvre dans un nouvel onglet)" | Texte SR-only pour les liens en nouvel onglet (i18n) |
| externalLinkLabel | external-link-label | string | '(lien externe)' | Texte SR-only pour les liens externes (i18n) |
| MerisiaElement (hérités) | ||||
| id | id | string | auto-généré | Identifiant unique du composant |
| lang | lang | string | 'fr' | Langue pour les messages internes (i18n) |
| width | width | number | – |
Largeur maximale en caractères : max-width: calc(N ch + 1.5rem)
|
Ressources externes
Import
import '@merisia-inc/merisia-components/link';