merisia-link
<merisia-link>Lien accessible avec détection automatique des liens externes (icône + texte SR) et indication pour les nouveaux onglets.
Import
import '@merisia-inc/merisia-components/link';Extension
Vous pouvez sous-classer ce composant pour ajouter ou redéfinir des propriétés, méthodes ou styles :
import { customElement } from 'lit/decorators.js';
import { MerisiaLink } from '@merisia-inc/merisia-components';
@customElement('my-link')
export class MyLink extends MerisiaLink {
// Ajoutez ou redéfinissez des propriétés, méthodes ou styles ici.
}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")
|
| openInNewTabText | 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)
|