SClickableChip <s-clickable-chip>

Un chip interactif que l'on peut cliquer, suivre comme un lien ou supprimer, utile pour les filtres et les tags appliqués. SClickableChip est le wrapper Vue 3 typé du web component <s-clickable-chip> de Shopify Polaris.

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

Bonnes pratiques

• Gardez des libellés courts. Visez un à trois mots, par exemple "Electronics" ou "Summer sale".
• Choisissez color selon l'importance. Utilisez color="subdued" pour les chips secondaires et conservez la valeur par défaut "base" pour les sélections standard.
• Rendez la suppression facile à repérer. Lorsqu'un chip est removable, vérifiez que son bouton de suppression est visible et qu'il a des états de survol et de focus clairs.
• Regroupez les chips liés. Disposez-les dans un SStack en ligne pour qu'ils s'alignent horizontalement avec un espacement régulier.

<SStack direction="inline" gap="small-200">
  <SClickableChip>Electronics</SClickableChip>
  <SClickableChip color="subdued" removable>Summer sale</SClickableChip>
</SStack>

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

Exemple

Visit Polaris Removable chip

<script setup>
import { ref } from 'vue'
import { SClickableChip, SIcon } from 'polaris-vue-elements'

const removed = ref(false)
</script>

<template>
  <!-- SClickableChip is a Chip that can act as a link (href) or command trigger,
       and its `graphic` slot only accepts an SIcon. -->
  <SClickableChip href="https://polaris.shopify.com" target="_blank">
    <template #graphic>
      <SIcon type="external" />
    </template>
    Visit Polaris
  </SClickableChip>

  <!-- removable chips fire `remove`; drive `hidden` from app state to actually hide it. -->
  <SClickableChip removable :hidden="removed" @remove="removed = true">
    Removable chip
  </SClickableChip>
</template>

Props

Prop	Type	Description
accessibilityLabel	string	Un libellé qui décrit l'objectif ou le contenu du Chip. Il est lu aux utilisateurs de technologies d'assistance comme les lecteurs d'écran.
color	"subdued" | "base" | "strong"	Rend la couleur plus ou moins intense.
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 chip est désactivé, ce qui empêche toute interaction de l'utilisateur.
hidden	boolean	Indique si le chip est masqué. Avec le pattern de composant contrôlé et des chips removable, mettez à jour cette propriété lorsque l'événement remove est déclenché. Pour les chips non supprimables, basculez manuellement cette propriété pour afficher ou masquer le chip.
href	string	L'URL vers laquelle naviguer au clic. L'événement click est déclenché en premier, puis la navigation a lieu. Si commandFor est également défini, la commande 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.
removable	boolean	Indique si le chip affiche un bouton de suppression. Au clic, le callback remove est déclenché.

Events

Event	Type
afterhide	CustomEvent
click	MouseEvent
remove	CustomEvent

Écoutez-les avec des listeners de la forme @afterhide sur <SClickableChip>.

Slots

Slot	Description
default	Le libellé texte affiché dans le chip, qui représente un filtre interactif, une étiquette ou un élément sélectionnable.
graphic	Une icône facultative à afficher au début du chip. N'accepte que des composants icône.