SLink <s-link>

Un lien texte qui mène vers une autre page ou URL, ou qui exécute une commande. SLink est le wrapper Vue 3 typé du web component <s-link> de Shopify Polaris.

import { SLink } from 'polaris-vue-elements'

Bonnes pratiques

• N'ouvrez que les liens externes dans un nouvel onglet. Définissez target="_blank" pour les URL extérieures à l'interface d'administration, comme la documentation d'aide ou les sites partenaires. Les liens internes à l'interface d'administration doivent rester dans le même onglet pour que les marchands ne perdent pas le fil de leur travail.

Consultez les bonnes pratiques de Shopify pour <s-link> (en anglais) pour l'ensemble des recommandations.

Exemple

Neutral linkCritical link

<script setup>
import { SLink } from 'polaris-vue-elements'
</script>

<template>
  <SLink href="https://polaris.shopify.com" target="_blank">Neutral link</SLink>
  <SLink href="https://polaris.shopify.com" target="_blank" tone="critical">Critical link</SLink>
</template>

Props

Prop	Type	Description
accessibilityLabel	string	Un libellé qui décrit l'objectif ou le contenu du composant pour les technologies d'assistance comme les lecteurs d'écran. Utilisez-le pour apporter un contexte supplémentaire lorsque le contenu visible seul ne suffit pas à exprimer clairement l'objectif du composant.
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	Définit l'action que le commandFor doit effectuer lorsque cet élément cliquable est activé. Consultez la documentation de chaque composant pour connaître les actions prises en charge. - --auto : une action par défaut pour le composant cible. - --show : affiche le composant cible. - --hide : masque le composant cible. - --toggle : bascule le composant cible. - --copy : copie le ClipboardItem cible.
commandFor	string	ID d'un composant qui doit réagir aux activations (p. ex. clics) sur ce composant. Consultez command pour savoir comment contrôler le comportement de la cible.
download	string	Indique au navigateur de traiter l'URL liée comme un téléchargement, la chaîne servant de nom de fichier. Le téléchargement ne fonctionne que pour les URL de même origine ou les schémas blob: et data:.
href	string	L'URL cible du lien. - Si elle est définie, la navigation vers l'emplacement indiqué par href a lieu après l'exécution de l'événement click. - Si un commandFor est défini, la command est exécutée à la place de la navigation.
interestFor	string	ID d'un composant qui doit réagir à l'intérêt (p. ex. survol et focus) porté à ce composant.
lang	string	La langue du contenu textuel. Utilisez cette option lorsque le texte est dans une langue différente du reste de la page, afin que les technologies d'assistance comme les lecteurs d'écran utilisent la bonne prononciation. La valeur doit être une sous-étiquette de langue valide du registre des sous-étiquettes de langue de l'IANA.
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	Indique où afficher l'URL liée.
tone	"auto" | "neutral" | "critical"	La signification sémantique et le traitement des couleurs du composant. - critical : problèmes urgents ou actions destructrices. - auto : déterminé automatiquement selon le contexte. - neutral : information générale sans intention particulière.

Events

Event	Type
click	MouseEvent

Écoutez-les avec des listeners de la forme @click sur <SLink>.

Slots

Slot	Description
default	Le texte ou les éléments affichés dans le composant link, qui redirige les utilisateurs vers un autre emplacement lorsqu'il est activé.