SClickable <s-clickable>

Macht beliebige Inhalte als Button oder Link klickbar, ohne ein Button-Styling vorzugeben. SClickable ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-clickable>.

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

Best Practices

• Elemente ohne sichtbaren Text beschriften. Enthält der klickbare Bereich keinen lesbaren Text, setzen Sie accessibilityLabel, damit Screenreader-Nutzer wissen, wofür er da ist.
• Den passenden Modus wählen. Als Button löst es Aktionen aus, mit href navigiert es, und mit type="submit" sendet es ein Formular ab.
• Deaktivierte Zustände erklären. Wenn Sie disabled setzen, machen Sie den Zustand visuell deutlich und ergänzen Sie einen Text, der Händlern erklärt, warum das Element nicht nutzbar ist.

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

Beispiel

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	Typ	Beschreibung
accessibilityLabel	string	Ein Label, das den Zweck oder Inhalt des Elements beschreibt. Wenn gesetzt, wird es Nutzern assistiver Technologien vorgelesen und gibt ihnen mehr Kontext. Nur verwenden, wenn der Inhalt des Elements Nutzern assistiver Technologien nicht genug Kontext bietet.
accessibilityRole	"generic" | "status" | "main" | "header" | "footer" | "section" | "region" | "aside" … (9 more)	Legt die semantische Bedeutung des Inhalts der Komponente fest. Wenn gesetzt, wird die Rolle von assistiven Technologien genutzt, um Nutzern die Navigation auf der Seite zu erleichtern.
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Ändert die Sichtbarkeit des Elements. - visible: Das Element ist für alle Nutzer sichtbar. - hidden: Das Element wird aus dem Accessibility Tree entfernt, bleibt aber sichtbar. - exclusive: Das Element ist visuell ausgeblendet, bleibt aber im Accessibility Tree.
background	"subdued" | "base" | "strong" | "transparent"	Die Hintergrundfarbe der Komponente.
blockSize	"auto" | "0"	Die vertikale Größe des Elements in Standardlayouts (Höhe bei Schreibrichtungen von links nach rechts oder von rechts nach links). Die Block-Größe passt sich der Schreibrichtung an: In horizontalen Layouts steuert sie die Höhe, in vertikalen Layouts die Breite. Dies sorgt für konsistentes Verhalten über verschiedene Textrichtungen hinweg. Weitere Informationen zu block-size.
border	BorderShorthand	Ein Rahmen in Kurzschreibweise, der Breite, Farbe und Stil in einer einzigen Eigenschaft festlegt.
borderColor	"subdued" | "base" | "strong"	Die Farbe des Rahmens aus der Farbskala des Designsystems. Wenn gesetzt, überschreibt sie den in der Eigenschaft border angegebenen Farbwert. subdued, base oder strong wählen, je nach gewünschter visueller Betonung.
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	Die Abrundung der Ecken des Elements anhand der Radius-Skala des Designsystems. Unterstützt die 1-bis-4-Werte-Syntax, um für jede Ecke unterschiedliche Radien festzulegen. Verwenden Sie dies für abgerundete Ecken oder vollständig abgerundete Elemente.
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	Der visuelle Stil des Rahmens an allen Seiten, etwa durchgezogen, gestrichelt oder gepunktet. Wenn gesetzt, überschreibt dies den in der Eigenschaft border angegebenen Stilwert. Unterstützt die 1-bis-4-Werte-Syntax, um für jede Seite unterschiedliche Stile festzulegen.
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none">	Die Stärke des Rahmens an allen Seiten. Wenn gesetzt, überschreibt dies den in der Eigenschaft border angegebenen Breitenwert. Unterstützt die 1-bis-4-Werte-Syntax, um für jede Seite unterschiedliche Breiten festzulegen.
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 die Komponente deaktiviert ist, sodass Klicks und Fokus verhindert werden. Im deaktivierten Zustand wird das Event click nicht ausgelöst, und Klick-Events von Kindelementen werden sofort an der Weitergabe gehindert. Interaktive Kindelemente können weiterhin den Fokus erhalten und bedient werden. Standardmäßig wird kein visuelles Styling angewendet. Wenden Sie bei Bedarf ein Deaktiviert-Styling selbst an.
display	"auto" | "none"	Der äußere display-Typ der Komponente. Der äußere Typ bestimmt die Teilnahme einer Komponente am Flow-Layout. - auto der Anfangswert der Komponente. Der tatsächliche Wert hängt von der Komponente und dem Kontext ab. - none blendet die Komponente aus und entfernt sie aus dem Accessibility Tree, sodass sie für Screenreader unsichtbar ist.
download	string	Veranlasst den Browser, die verlinkte URL als Download zu behandeln, wobei der String als Dateiname dient. Download funktioniert nur für Same-Origin-URLs oder die Schemata blob: und data:.
href	string	Die URL, auf die verlinkt wird. - Wenn gesetzt, wird nach Ausführung des click-Events zu dem in href angegebenen Ort navigiert. - Ist ein commandFor gesetzt, wird statt der Navigation das command ausgeführt.
inlineSize	"auto" | "0"	Die Breite bei horizontalen Schreibrichtungen bzw. die Höhe bei vertikalen Schreibrichtungen. Verwenden Sie dies für flussrelative Größen, die sich an die Textrichtung anpassen. Weitere Informationen zu inline-size.
interestFor	string	ID einer Komponente, die auf Interesse (z. B. Hover und Fokus) an dieser Komponente reagieren soll.
lang	string	Die Sprache des Textinhalts. Verwenden Sie dies, wenn der Text in einer anderen Sprache als der Rest der Seite verfasst ist, damit Hilfstechnologien wie Screenreader die korrekte Aussprache verwenden. Der Wert sollte ein gültiger Sprach-Subtag aus der IANA Language Subtag Registry sein.
loading	boolean	Ob sich die Komponente in einem Ladezustand befindet, der Hilfstechnologien signalisiert, dass eine Aktion läuft, und Interaktionen verhindert.
maxBlockSize	"none" | "0"	Die maximale Höhe bei horizontalen Schreibrichtungen bzw. die maximale Breite bei vertikalen Schreibrichtungen. Verhindert, dass das Element über diese Größe hinauswächst. Weitere Informationen zu max-block-size.
maxInlineSize	"none" | "0"	Die maximale Breite bei horizontalen Schreibrichtungen bzw. die maximale Höhe bei vertikalen Schreibrichtungen. Verhindert, dass das Element über diese Größe hinauswächst. Weitere Informationen zu max-inline-size.
minBlockSize	"0"	Die minimale Höhe bei horizontalen Schreibrichtungen bzw. die minimale Breite bei vertikalen Schreibrichtungen. Verhindert, dass das Element unter diese Größe schrumpft. Weitere Informationen zu min-block-size.
minInlineSize	"0"	Die minimale Breite bei horizontalen Schreibrichtungen bzw. die minimale Höhe bei vertikalen Schreibrichtungen. Verhindert, dass das Element unter diese Größe schrumpft. Weitere Informationen zu min-inline-size.
overflow	"visible" | "hidden"	Legt das Overflow-Verhalten des Elements fest. - hidden: Schneidet den Inhalt ab, wenn er größer als der Container des Elements ist. Das Element ist nicht scrollbar, und Nutzer können den abgeschnittenen Inhalt weder durch Ziehen noch mit dem Mausrad erreichen. - visible: Inhalt, der über den Container des Elements hinausragt, ist sichtbar.
padding	MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>	Das Padding an allen Kanten der Komponente. Unterstützt die 1-bis-4-Werte-Syntax mit flussrelativen Werten: - 1 Wert gilt für alle Seiten - 2 Werte gelten für block (oben/unten) und inline (links/rechts) - 3 Werte gelten für block-start (oben), inline (links/rechts) und block-end (unten) - 4 Werte gelten für block-start (oben), inline-end (rechts), block-end (unten) und inline-start (links) Beispiele:* base, large none, base large-100 base small Verwenden Sie auto, um das Padding vom nächstgelegenen Container mit entferntem Padding zu übernehmen. Akzeptiert auch einen responsiven Wert als String mit dem unterstützten PaddingKeyword als Query-Wert.
paddingBlock	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	Der Innenabstand in Blockrichtung (oben und unten bei horizontalen Schreibrichtungen). Akzeptiert einen einzelnen Wert für beide Seiten oder zwei durch Leerzeichen getrennte Werte für Block-Start und Block-Ende. Beispiel:* large none wendet large oben und none unten an. Überschreibt den Blockwert von padding. Akzeptiert auch einen responsiven Wert als String mit dem unterstützten PaddingKeyword als Query-Wert.
paddingBlockEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Der Innenabstand am Block-Ende (unten bei horizontalen Schreibrichtungen). Überschreibt den Block-End-Wert von paddingBlock. Akzeptiert auch einen responsiven Wert als String mit dem unterstützten PaddingKeyword als Query-Wert.
paddingBlockStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Der Innenabstand am Block-Start (oben bei horizontalen Schreibrichtungen). Überschreibt den Block-Start-Wert von paddingBlock. Akzeptiert auch einen responsiven Wert als String mit dem unterstützten PaddingKeyword als Query-Wert.
paddingInline	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	Das Padding in Inline-Richtung (links und rechts bei horizontalen Schreibrichtungen). Akzeptiert einen einzelnen Wert für beide Seiten oder zwei durch Leerzeichen getrennte Werte für inline-start und inline-end. Beispiel:* large none wendet large links und none rechts an. Überschreibt den Inline-Wert aus padding. Akzeptiert auch einen responsiven Wert als String mit dem unterstützten PaddingKeyword als Query-Wert.
paddingInlineEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Das Padding am Inline-Ende (rechts bei LTR-Schreibrichtung, links bei RTL). Überschreibt den inline-end-Wert aus paddingInline. Akzeptiert auch einen responsiven Wert als String mit dem unterstützten PaddingKeyword als Query-Wert.
paddingInlineStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Das Padding am Inline-Anfang (links bei LTR-Schreibrichtung, rechts bei RTL). Überschreibt den inline-start-Wert aus paddingInline. Akzeptiert auch einen responsiven Wert als String mit dem unterstützten PaddingKeyword als Query-Wert.
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	Gibt an, wo die verlinkte URL angezeigt werden soll.
type	"button" | "reset" | "submit"	Das Verhalten des Buttons. - submit: Die Komponente fungiert als Submit-Button und sendet das nächstgelegene Formular ab. - button: Die Komponente fungiert als Button ohne Standardaktion. - reset: Die Komponente fungiert als Reset-Button und setzt das nächstgelegene Formular zurück (Felder erhalten wieder ihre Standardwerte). Diese Eigenschaft wird ignoriert, wenn die Komponente href oder commandFor/command unterstützt und eines davon gesetzt ist.

Einige Typspalten oben wurden zur besseren Lesbarkeit gekürzt; die vollständigen Unions finden sich in den generierten TypeScript-Typen der Bibliothek (src/lib/generated/types.ts).

Events

Event	Typ
blur	FocusEvent
click	MouseEvent
focus	FocusEvent

Auf diese Events lauschen Sie mit Listenern im Stil von @blur auf <SClickable>.

Slots

Slot	Beschreibung
default	Der Inhalt innerhalb der Clickable-Komponente, die beliebige Inhalte interaktiv und anklickbar macht, ohne die semantische Bedeutung eines Buttons oder Links.