SParagraph <s-paragraph>

Ein Block Fließtext. SParagraph ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-paragraph>.

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

Best Practices

• Absätze kurz halten. Zielen Sie auf zwei bis vier Sätze in einfacher Sprache ohne Fachjargon. Händler überfliegen Texte meist; teilen Sie lange Inhalte daher in kleinere Stücke auf.
• Mit Tone die Absicht signalisieren. tone="critical" passt zu Fehlern, "caution" zu Warnungen und "success" zu Bestätigungen. Untermauern Sie die Farbe immer mit klarer Formulierung, statt sich allein auf sie zu verlassen.
• Auf Barrierefreiheit achten. Ergänzen Sie Text nur für Screenreader (accessibilityVisibility="exclusive") für Kontext, den sehende Händler aus Layout oder Icons ableiten, und sorgen Sie dafür, dass eingefärbter Text genug Kontrast zum Lesen behält.
• Zeilen mit Bedacht kürzen. lineClamp hilft an engen Stellen wie Cards oder Vorschauen, aber das Abschneiden darf nie kritische Informationen verbergen.

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

Beispiel

Default paragraph text, used for the bulk of body copy.A subdued paragraph, useful for secondary or helper text.A critical paragraph, useful for inline error copy. A long paragraph that demonstrates lineClamp truncating its content after a fixed number of lines instead of wrapping indefinitely down the page.

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

<template>
  <SParagraph>Default paragraph text, used for the bulk of body copy.</SParagraph>
  <SParagraph color="subdued">A subdued paragraph, useful for secondary or helper text.</SParagraph>
  <SParagraph tone="critical">A critical paragraph, useful for inline error copy.</SParagraph>
  <SParagraph :lineClamp="2" style="max-width: 280px">
    A long paragraph that demonstrates lineClamp truncating its content after a fixed
    number of lines instead of wrapping indefinitely down the page.
  </SParagraph>
</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 Absatzes. 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 Absatzes.
lineClamp	number	Kürzt den Textinhalt auf die angegebene Anzahl von Zeilen.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	Der semantische Ton des Absatztextes, 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). - caution: Hinweise, die Aufmerksamkeit erfordern (gelb).

Slots

Slot	Beschreibung
default	Der Absatztext innerhalb der Paragraph-Komponente, die einen Block zusammengehörigen Textes mit passendem Styling darstellt.