SClickable <s-clickable>

Rend n'importe quel contenu cliquable comme un bouton ou un lien, sans imposer le style d'un bouton. SClickable est le wrapper Vue 3 typé du web component <s-clickable> de Shopify Polaris.

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

Bonnes pratiques

• Ajoutez un libellé aux éléments sans texte visible. Si la zone cliquable ne contient aucun texte lisible, définissez accessibilityLabel pour que les utilisateurs de lecteur d'écran sachent à quoi elle sert.
• Choisissez le mode adapté. Utilisez-le comme bouton pour déclencher des actions, donnez-lui un href pour naviguer et définissez type="submit" lorsqu'il soumet un formulaire.
• Expliquez les états désactivés. Lorsque vous définissez disabled, rendez l'état visuellement clair et ajoutez un texte qui explique aux marchands pourquoi l'élément est inutilisable.

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

Exemple

Clicked 0 times

<script setup>
import { ref } from 'vue'
import { SClickable, SText } from 'polaris-vue-elements'

const clicks = ref(0)
</script>

<template>
  <!-- SClickable is a generic, unstyled-by-default interactive container: box
       styling props (background, padding, borderRadius, ...) plus a click event. -->
  <SClickable
    background="subdued"
    borderRadius="200"
    padding="base"
    @click="clicks++"
  >
    <SText>Clicked {{ clicks }} times</SText>
  </SClickable>
</template>

Props

Prop	Type	Description
accessibilityLabel	string	Un libellé qui décrit l'objectif ou le contenu de l'élément. Lorsqu'il est défini, il est annoncé aux utilisateurs de technologies d'assistance et leur apporte davantage de contexte. Ne l'utilisez que lorsque le contenu de l'élément n'apporte pas assez de contexte aux utilisateurs de technologies d'assistance.
accessibilityRole	"generic" | "status" | "main" | "header" | "footer" | "section" | "region" | "aside" … (9 more)	Définit la signification sémantique du contenu du composant. Lorsqu'il est défini, le rôle est utilisé par les technologies d'assistance pour aider les utilisateurs à naviguer dans la page.
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Modifie la visibilité de l'élément. - visible : l'élément est visible par tous les utilisateurs. - hidden : l'élément est retiré de l'arbre d'accessibilité mais reste visible. - exclusive : l'élément est masqué visuellement mais reste dans l'arbre d'accessibilité.
background	"subdued" | "base" | "strong" | "transparent"	La couleur d'arrière-plan du composant.
blockSize	"auto" | "0"	La taille verticale de l'élément dans les mises en page standard (la hauteur dans les modes d'écriture de gauche à droite ou de droite à gauche). La taille block s'adapte au sens d'écriture : dans les mises en page horizontales, elle contrôle la hauteur ; dans les mises en page verticales, la largeur. Cela garantit un comportement cohérent quel que soit le sens du texte. En savoir plus sur block-size.
border	BorderShorthand	Une bordure définie avec une syntaxe raccourcie pour indiquer la largeur, la couleur et le style en une seule propriété.
borderColor	"subdued" | "base" | "strong"	La couleur de la bordure, issue de l'échelle de couleurs du design system. Lorsqu'elle est définie, elle remplace la couleur indiquée dans la propriété border. Choisissez subdued, base ou strong selon l'emphase visuelle souhaitée.
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	L'arrondi des coins de l'élément, selon l'échelle de rayons du design system. Prend en charge la syntaxe à 1 à 4 valeurs pour définir des rayons différents par coin. Utilisez-la pour créer des coins arrondis ou des éléments entièrement arrondis.
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	Le style visuel de la bordure sur tous les côtés, par exemple pleine, tiretée ou pointillée. Lorsqu'il est défini, il remplace le style indiqué dans la propriété border. Prend en charge la syntaxe à 1 à 4 valeurs pour définir des styles différents par côté.
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none">	L'épaisseur de la bordure sur tous les côtés. Lorsqu'elle est définie, elle remplace la largeur indiquée dans la propriété border. Prend en charge la syntaxe à 1 à 4 valeurs pour définir des largeurs différentes par côté.
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.
disabled	boolean	Indique si le composant est désactivé, ce qui empêche les clics et le focus. Lorsqu'il est désactivé, l'événement click n'est pas déclenché et les événements de clic des éléments enfants cessent immédiatement de se propager. Les éléments enfants interactifs peuvent toujours recevoir le focus et être utilisés. Aucun style visuel n'est appliqué par défaut ; appliquez vous-même un style désactivé si nécessaire.
display	"auto" | "none"	Le type d'affichage externe du composant. Le type externe définit la participation du composant à la mise en page en flux. - auto la valeur initiale du composant. La valeur réelle dépend du composant et du contexte. - none masque le composant et le retire de l'arbre d'accessibilité, le rendant invisible pour les lecteurs d'écran.
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.
inlineSize	"auto" | "0"	La largeur dans les modes d'écriture horizontaux, ou la hauteur dans les modes d'écriture verticaux. Utilisez-la pour un dimensionnement relatif au flux qui s'adapte au sens du texte. En savoir plus sur inline-size.
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.
loading	boolean	Indique si le composant est en cours de chargement, ce qui signale aux technologies d'assistance qu'une action est en cours et empêche toute interaction.
maxBlockSize	"none" | "0"	La hauteur maximale dans les modes d'écriture horizontaux, ou la largeur maximale dans les modes d'écriture verticaux. Empêche l'élément de dépasser cette taille. En savoir plus sur max-block-size.
maxInlineSize	"none" | "0"	La largeur maximale dans les modes d'écriture horizontaux, ou la hauteur maximale dans les modes d'écriture verticaux. Empêche l'élément de dépasser cette taille. En savoir plus sur max-inline-size.
minBlockSize	"0"	La hauteur minimale dans les modes d'écriture horizontaux, ou la largeur minimale dans les modes d'écriture verticaux. Empêche l'élément de rétrécir en dessous de cette taille. En savoir plus sur min-block-size.
minInlineSize	"0"	La largeur minimale dans les modes d'écriture horizontaux, ou la hauteur minimale dans les modes d'écriture verticaux. Empêche l'élément de rétrécir en dessous de cette taille. En savoir plus sur min-inline-size.
overflow	"visible" | "hidden"	Définit le comportement de débordement de l'élément. - hidden : rogne le contenu lorsqu'il est plus grand que le conteneur de l'élément. L'élément ne peut pas défiler et les utilisateurs ne peuvent pas accéder au contenu rogné en le faisant glisser ou avec la molette de la souris. - visible : le contenu qui dépasse du conteneur de l'élément reste visible.
padding	MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>	Le padding appliqué à tous les bords du composant. Prend en charge la syntaxe à 1 à 4 valeurs avec des valeurs relatives au flux : - 1 valeur s'applique à tous les côtés - 2 valeurs s'appliquent à block (haut/bas) et inline (gauche/droite) - 3 valeurs s'appliquent à block-start (haut), inline (gauche/droite) et block-end (bas) - 4 valeurs s'appliquent à block-start (haut), inline-end (droite), block-end (bas) et inline-start (gauche) Exemples :* base, large none, base large-100 base small Utilisez auto pour hériter du padding du conteneur le plus proche dont le padding a été supprimé. Accepte aussi une chaîne de valeur responsive avec le PaddingKeyword pris en charge comme valeur de requête.
paddingBlock	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	Le padding dans la direction block (haut et bas dans les modes d'écriture horizontaux). Accepte une seule valeur pour les deux côtés, ou deux valeurs séparées par un espace pour block-start et block-end. Exemple :* large none applique large en haut et none en bas. Remplace la valeur block de padding. Accepte aussi une chaîne de valeur responsive avec le PaddingKeyword pris en charge comme valeur de requête.
paddingBlockEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Le padding block-end (bas dans les modes d'écriture horizontaux). Remplace la valeur block-end de paddingBlock. Accepte aussi une chaîne de valeur responsive avec le PaddingKeyword pris en charge comme valeur de requête.
paddingBlockStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Le padding block-start (haut dans les modes d'écriture horizontaux). Remplace la valeur block-start de paddingBlock. Accepte aussi une chaîne de valeur responsive avec le PaddingKeyword pris en charge comme valeur de requête.
paddingInline	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	Le padding dans la direction inline (gauche et droite dans les modes d'écriture horizontaux). Accepte une valeur unique pour les deux côtés, ou deux valeurs séparées par un espace pour inline-start et inline-end. Exemple :* large none applique large à gauche et none à droite. Remplace la valeur inline de padding. Accepte aussi une chaîne de valeur responsive avec le PaddingKeyword pris en charge comme valeur de requête.
paddingInlineEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Le padding inline-end (à droite en écriture LTR, à gauche en RTL). Remplace la valeur inline-end de paddingInline. Accepte aussi une chaîne de valeur responsive avec le PaddingKeyword pris en charge comme valeur de requête.
paddingInlineStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Le padding inline-start (à gauche en écriture LTR, à droite en RTL). Remplace la valeur inline-start de paddingInline. Accepte aussi une chaîne de valeur responsive avec le PaddingKeyword pris en charge comme valeur de requête.
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	Indique où afficher l'URL liée.
type	"button" | "reset" | "submit"	Le comportement du Button. - submit : indique que le composant agit comme un bouton d'envoi, c'est-à-dire qu'il soumet le formulaire le plus proche. - button : indique que le composant agit comme un bouton, c'est-à-dire sans action par défaut. - reset : indique que le composant agit comme un bouton de réinitialisation, c'est-à-dire qu'il réinitialise le formulaire le plus proche (en rétablissant les valeurs par défaut des champs). Cette propriété est ignorée si le composant prend en charge href ou commandFor/command et que l'une d'elles est définie.

Certaines colonnes de type ci-dessus sont tronquées pour plus de lisibilité ; l'union complète est disponible dans les types TypeScript générés de la bibliothèque (src/lib/generated/types.ts).

Events

Event	Type
blur	FocusEvent
click	MouseEvent
focus	FocusEvent

Écoutez-les avec des listeners de la forme @blur sur <SClickable>.

Slots

Slot	Description
default	Le contenu affiché dans le composant clickable, qui rend n'importe quel contenu interactif et cliquable sans la signification sémantique d'un bouton ou d'un lien.