SPressButton <s-press-button>

Ein Umschalt-Button, der gedrückt oder nicht gedrückt bleibt, um einen Modus oder Filter ein- und auszuschalten. SPressButton ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-press-button>.

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

Beispiel

SecondaryTertiaryDisabled

<script setup>
import { ref } from 'vue'
import { SPressButton } from 'polaris-vue-elements'

const pressed = ref(false)
</script>

<template>
  <!-- SPressButton is a toggle-style button (aria-pressed) — pressed/defaultPressed
       control the on/off state instead of a click counter. -->
  <SPressButton icon="star" accessibilityLabel="Favorite" :pressed="pressed" @click="pressed = !pressed" />
  <SPressButton variant="secondary">Secondary</SPressButton>
  <SPressButton variant="tertiary">Tertiary</SPressButton>
  <SPressButton disabled>Disabled</SPressButton>
</template>

Props

Prop	Typ	Beschreibung
accessibilityLabel	string	Ein Label, das den Zweck oder Inhalt des Buttons beschreibt. Es wird Nutzern assistiver Technologien wie Screenreadern vorgelesen. Verwenden, wenn nur ein Icon genutzt wird oder der Button-Text Nutzern assistiver Technologien nicht genug Kontext bietet.
defaultPressed	boolean	Ob der Button standardmäßig gedrückt ist.
disabled	boolean	Deaktiviert den Button, sodass er weder angeklickt werden noch den Fokus erhalten kann.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Die Art des Icons, das im Button angezeigt wird.
inlineSize	"auto" | "fill" | "fit-content"	Die angezeigte Inline-Breite des Buttons. - auto: Die Größe des Buttons hängt von der Oberfläche und dem Kontext ab. - fill: Der Button nimmt 100 % der verfügbaren Inline-Größe ein. - fit-content: Der Button nimmt die minimale Inline-Größe ein, die für seinen Inhalt erforderlich ist.
lang	string	Gibt die Sprache des Textes an. Nützlich, wenn der Text in einer anderen Sprache als der Rest der Seite verfasst ist. So können assistive Technologien wie Screenreader die richtige Aussprache verwenden. Referenz der Werte (Label "subtag")
loading	boolean	Ersetzt den Inhalt durch eine Ladeanzeige, während eine Hintergrundaktion ausgeführt wird. Deaktiviert außerdem den Button.
pressed	boolean	Ob der Button gedrückt ist.
tone	"neutral"	Legt den Ton des Buttons entsprechend der Absicht der vermittelten Information fest.
variant	"secondary" | "tertiary"	Ändert das visuelle Erscheinungsbild des Buttons.

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 <SPressButton>.

Slots

Slot	Beschreibung
default	Der Inhalt des PressButton.