SClickableChip <s-clickable-chip>

Ein interaktiver Chip, der angeklickt, als Link geöffnet oder entfernt werden kann, nützlich für Filter und angewendete Tags. SClickableChip ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-clickable-chip>.

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

Best Practices

• Labels kurz halten. Ziel sind ein bis drei Wörter, zum Beispiel „Electronics“ oder „Summer sale“.
• color nach Wichtigkeit wählen. Verwenden Sie color="subdued" für sekundäre Chips und behalten Sie den Standardwert "base" für normale Auswahlen bei.
• Entfernen gut sichtbar machen. Ist ein Chip removable, prüfen Sie, dass sein Entfernen-Button sichtbar ist und klare Hover- und Fokuszustände hat.
• Zusammengehörige Chips gruppieren. Ordnen Sie sie in einem inline SStack an, damit sie horizontal mit gleichmäßigen Abständen ausgerichtet sind.

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

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

Beispiel

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	Typ	Beschreibung
accessibilityLabel	string	Ein Label, das den Zweck oder Inhalt des Chips beschreibt. Es wird Nutzern assistiver Technologien wie Screenreadern vorgelesen.
color	"subdued" | "base" | "strong"	Ändert die Farbe, sodass sie mehr oder weniger intensiv wirkt.
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	Legt die Aktion fest, die das commandFor-Ziel ausführen soll, wenn dieses klickbare Element aktiviert wird. Welche Aktionen unterstützt werden, steht in der Dokumentation der jeweiligen Komponente. - --auto: eine Standardaktion für die Zielkomponente. - --show: zeigt die Zielkomponente an. - --hide: blendet die Zielkomponente aus. - --toggle: schaltet die Zielkomponente um. - --copy: kopiert das Ziel-ClipboardItem.
commandFor	string	ID einer Komponente, die auf Aktivierungen (z. B. Klicks) dieser Komponente reagieren soll. Siehe command zur Steuerung des Verhaltens des Ziels.
disabled	boolean	Ob der Chip deaktiviert ist, sodass keine Benutzerinteraktion möglich ist.
hidden	boolean	Ob der Chip ausgeblendet ist. Wenn Sie das Muster kontrollierter Komponenten mit removable-Chips verwenden, aktualisieren Sie diese Eigenschaft, sobald das Event remove ausgelöst wird. Bei nicht entfernbaren Chips schalten Sie diese Eigenschaft manuell um, um den Chip ein- oder auszublenden.
href	string	Die URL, zu der beim Klick navigiert wird. Zuerst wird das click-Event ausgelöst, danach erfolgt die Navigation. Ist zusätzlich commandFor gesetzt, wird statt der Navigation der Befehl ausgeführt.
interestFor	string	ID einer Komponente, die auf Interesse (z. B. Hover und Fokus) an dieser Komponente reagieren soll.
removable	boolean	Ob der Chip einen Entfernen-Button zum Schließen anzeigt. Beim Klicken wird der Callback remove ausgelöst.

Events

Event	Typ
afterhide	CustomEvent
click	MouseEvent
remove	CustomEvent

Auf diese Events lauschen Sie mit Listenern im Stil von @afterhide auf <SClickableChip>.

Slots

Slot	Beschreibung
default	Die Textbeschriftung innerhalb des Chips, der einen interaktiven Filter, ein Tag oder ein auswählbares Element darstellt.
graphic	Ein optionales Icon am Anfang des Chips. Akzeptiert nur Icon-Komponenten.