SText <s-text>

Inline-Text mit Gestaltung für Ton, Schriftstärke und Hervorhebung. SText ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-text>.

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

Best Practices

• Einen semantischen type wählen. Wählen Sie "strong", um Schlüsselwörter oder Wendungen hervorzuheben, "address" für eine Post- oder E-Mail-Adresse und "redundant" für Text, der Screenreader-Nutzern Kontext gibt, wenn derselbe Inhalt bereits auf dem Bildschirm steht. Der richtige Typ lässt assistive Technologien ausdrücken, was der Text bedeutet.
• Sparsam hervorheben. Wenden Sie type="strong" auf Schlüsselwörter oder Zahlen innerhalb eines Satzes an, nicht auf ganze Sätze; zu viel Hervorhebung verliert ihre Wirkung und erschwert das Überfliegen.
• Tone für Inline-Status verwenden. Tones wie "critical", "success" oder "caution" lenken die Aufmerksamkeit auf einen Status, sollten aber mit klarer Formulierung kombiniert werden, statt die Botschaft allein der Farbe zu überlassen.
• Wichtiges nicht abschwächen. color="subdued" passt zu Zeitstempeln und Metadaten, sollte aber nicht für kritische Informationen verwendet werden, die Händler lesen müssen.

<SParagraph>
  Order shipped to <SText type="address">150 Elgin St, Ottawa</SText>.
  <SText type="strong">Payment pending.</SText>
</SParagraph>

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

Beispiel

Default textStrong textSubdued textSuccess toneCritical toneTabular numbers: 10 200 3000

<script setup>
import { SText } from 'polaris-vue-elements'
</script>

<template>
  <SText>Default text</SText>
  <SText type="strong">Strong text</SText>
  <SText color="subdued">Subdued text</SText>
  <SText tone="success">Success tone</SText>
  <SText tone="critical">Critical tone</SText>
  <SText fontVariantNumeric="tabular-nums">Tabular numbers: 10 200 3000</SText>
</template>

Props

Prop	Typ	Beschreibung
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.
color	"subdued" | "base"	Ändert die Farbe, sodass sie mehr oder weniger intensiv wirkt.
dir	"auto" | "ltr" | "rtl"	Gibt die Schreibrichtung des Textes im Element an. - ltr: Sprachen, die von links nach rechts geschrieben werden (z. B. Englisch) - rtl: Sprachen, die von rechts nach links geschrieben werden (z. B. Arabisch) - auto: Der User Agent bestimmt die Richtung anhand des Inhalts - '': Die Richtung wird von übergeordneten Elementen geerbt (gleichbedeutend mit dem Weglassen des Attributs)
fontSize	"base" | "auto" | "small-200" | "small-100" | "small" | "large" | "large-100"	Schriftgröße des Textes. Die benannten Werte wenden auch die passende Zeilenhöhe und Laufweite an.
fontVariantNumeric	"auto" | "normal" | "tabular-nums"	Legt die numerischen Eigenschaften der Schrift fest.
fontWeight	"base" | "auto" | "medium" | "semibold" | "bold"	Schriftstärke des Textes.
interestFor	string	ID einer Komponente, die auf Interesse (z. B. Hover und Fokus) an dieser Komponente reagieren soll.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	Der semantische Ton des Textes, der dessen Farbe ändert, um Bedeutung zu vermitteln. - info: Informative Inhalte oder hilfreiche Tipps (blau). - success: Positive Ergebnisse oder erfolgreiche Zustände (grün). - warning: Wichtige Warnungen vor möglichen Problemen (orange). - critical: Dringende Probleme oder destruktive Aktionen (rot). - auto: Wird automatisch anhand des Kontexts bestimmt. - neutral: Allgemeine Informationen ohne bestimmte Absicht (grau). - caution: Hinweise, die Aufmerksamkeit erfordern (gelb).
type	"strong" | "address" | "redundant" | "generic"	Der semantische Typ und die Gestaltung des Textinhalts. Andere Darstellungseigenschaften des Textes überschreiben das Standard-Styling. - strong: Hebt den Text als besonders wichtig hervor, typischerweise fett dargestellt. - generic: Standardtext ohne besondere semantische Bedeutung oder Gestaltung. - address: Kennzeichnet den Text als Kontaktinformation, etwa eine Post- oder E-Mail-Adresse. - redundant: Kennzeichnet den Text als redundante oder doppelte Information für den Screenreader-Kontext.

Slots

Slot	Beschreibung
default	Der Textinhalt innerhalb der Text-Komponente, die eine dem angegebenen Texttyp entsprechende semantische Bedeutung und Gestaltung anwendet.