SChip <s-chip>

Une étiquette statique pour un tag ou un attribut, éventuellement supprimable. SChip est le wrapper Vue 3 typé du web component <s-chip> de Shopify Polaris.

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

Bonnes pratiques

• Utilisez les chips pour décrire, pas pour agir. Les chips conviennent aux étiquettes, statuts et catégories qui renseignent les marchands sur le contenu. Ce ne sont pas des boutons : lorsqu'un chip doit être cliqué ou supprimé, utilisez plutôt SClickableChip.
• Gardez des libellés courts. Un texte bref comme "Featured" ou "On sale" se lit d'un coup d'œil, alors que les libellés longs ralentissent la lecture et risquent d'être tronqués.
• Adaptez le poids visuel au contenu. Utilisez color="subdued" pour les métadonnées secondaires et la couleur par défaut pour les étiquettes et catégories ordinaires.
• Placez les chips à côté de ce qu'ils décrivent. Gardez-les près de l'élément qu'ils qualifient et, dans les listes, placez-les au même endroit sur chaque ligne pour que les marchands puissent parcourir rapidement.
• Ajoutez une icône lorsque c'est utile. Un SIcon dans le slot graphic peut rendre un statut ou une catégorie familière plus facile à reconnaître.

<SChip>
  <SIcon slot="graphic" type="star" />
  Featured
</SChip>
<SChip color="subdued">Imported</SChip>

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

Exemple

Snowboard Removable chip

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

const removed = ref(false)
</script>

<template>
  <!-- SChip's `graphic` slot only accepts an SIcon. -->
  <SChip>
    <template #graphic>
      <SIcon type="product" />
    </template>
    Snowboard
  </SChip>

  <!-- SChip has no `hidden` prop (unlike SClickableChip) — use v-if to remove it
       from the DOM when `remove` fires. -->
  <SChip v-if="!removed" color="strong" removable @remove="removed = true">
    Removable chip
  </SChip>
</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.
color	"subdued" | "base" | "strong"	Le niveau d'emphase de couleur qui contrôle l'intensité visuelle.
removable	boolean	Indique si le chip est supprimable.

Events

Event	Type
remove	CustomEvent

Écoutez-les avec des listeners de la forme @remove sur <SChip>.

Slots

Slot	Description
default	Le libellé texte affiché dans le composant chip, représentant généralement un filtre sélectionné, une étiquette ou un élément supprimable.
graphic	Une icône facultative à afficher au début du chip. N'accepte que des composants icône.