SChip <s-chip>

Ein statisches Label für ein Tag oder Attribut, optional entfernbar. SChip ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-chip>.

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

Best Practices

• Chips zum Beschreiben, nicht zum Handeln. Chips eignen sich für Tags, Status und Kategorien, die Händlern etwas über den Inhalt sagen. Sie sind keine Buttons; muss ein Chip anklickbar oder entfernbar sein, verwenden Sie stattdessen SClickableChip.
• Labels kurz halten. Knappe Texte wie „Featured“ oder „On sale“ sind auf einen Blick lesbar, während lange Labels das Überfliegen bremsen und abgeschnitten werden können.
• Visuelles Gewicht an den Inhalt anpassen. Verwenden Sie color="subdued" für sekundäre Metadaten und die Standardfarbe für gewöhnliche Tags und Kategorien.
• Chips neben dem Beschriebenen platzieren. Halten Sie sie neben dem Element, das sie kennzeichnen, und setzen Sie sie in Listen in jeder Zeile an dieselbe Position, damit Händler schnell überfliegen können.
• Icon ergänzen, wenn es hilft. Ein SIcon im Slot graphic kann einen Status oder eine vertraute Kategorie leichter erkennbar machen.

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

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-chip> (auf Englisch).

Beispiel

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	Typ	Beschreibung
accessibilityLabel	string	Ein Label, das den Zweck oder Inhalt der Komponente für assistive Technologien wie Screenreader beschreibt. Damit lässt sich zusätzlicher Kontext bereitstellen, wenn der sichtbare Inhalt allein den Zweck der Komponente nicht klar vermittelt.
color	"subdued" | "base" | "strong"	Die Stufe der Farbbetonung, die die visuelle Intensität steuert.
removable	boolean	Ob der Chip entfernbar ist.

Events

Event	Typ
remove	CustomEvent

Auf diese Events lauschen Sie mit Listenern im Stil von @remove auf <SChip>.

Slots

Slot	Beschreibung
default	Die Textbeschriftung innerhalb der Chip-Komponente, die typischerweise einen ausgewählten Filter, ein Tag oder ein entfernbares Element darstellt.
graphic	Ein optionales Icon am Anfang des Chips. Akzeptiert nur Icon-Komponenten.