SHeading <s-heading>

Eine Überschrift, die einen Seitenabschnitt betitelt. SHeading ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-heading>.

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

Best Practices

• Jedem wichtigen Abschnitt eine Überschrift geben. Überschriften bilden eine Gliederung der Oberfläche, die Händlern bei der Orientierung hilft und zeigt, wie Inhalte organisiert sind.
• Die Komponente die Überschriftenebene wählen lassen. Sie vergibt die HTML-Ebene (h2, h3, h4) anhand der Verschachtelungstiefe, sodass Screenreader eine korrekte Dokumentstruktur erhalten, ohne dass Ebenen von Hand gesetzt werden müssen.
• Konkret sein. Sagen Sie, worum es im Abschnitt geht, zum Beispiel „Product details“ oder „Customer details“ statt nur „Details“.
• Zeilen nur kürzen, wenn es sein muss. lineClamp kann lange Überschriften auf engem Raum wie in Cards bändigen, aber eine gekürzte Überschrift kann Informationen verbergen, die Händler brauchen.
• Ähnliche Überschriften gleich gestalten. Überschriften für dieselbe Art von Inhalt, etwa für jede Card in einer Liste, sollten gleich aussehen.

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

Beispiel

Default headingRenders as a semantic heading element by default.Presentational headingSame visual style, but stripped from the accessibility tree's heading structure. A long heading that gets truncated to a single line via lineClamp

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

<template>
  <SHeading>Default heading</SHeading>
  <SParagraph>Renders as a semantic heading element by default.</SParagraph>

  <SHeading accessibilityRole="presentation">Presentational heading</SHeading>
  <SParagraph>Same visual style, but stripped from the accessibility tree's heading structure.</SParagraph>

  <SHeading :lineClamp="1" style="max-width: 220px">
    A long heading that gets truncated to a single line via lineClamp
  </SHeading>
</template>

Props

Prop	Typ	Beschreibung
accessibilityRole	"heading" | "presentation" | "none"	Die semantische Bedeutung des Komponenteninhalts. Wenn gesetzt, wird die Rolle von Hilfstechnologien genutzt, um Benutzern die Navigation auf der Seite zu erleichtern. - heading: Kennzeichnet das Element für Hilfstechnologien als Überschrift. - none: Entfernt die semantische Bedeutung vom Überschriftenelement. - presentation: Entfernt die semantische Bedeutung vom Überschriftenelement.
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.
fontSize	"base" | "auto" | "small" | "large" | "large-100" | "large-200" | "large-300" | "large-400"	Die Schriftgröße der Überschrift. Die benannten Werte setzen auch die passende Zeilenhöhe und Laufweite: - 'small' entspricht headingXs - 'base' entspricht headingSm - 'large' / 'large-100' entspricht headingMd - 'large-200' entspricht headingLg - 'large-300' entspricht headingXl - 'large-400' entspricht heading2xl
lineClamp	number	Kürzt den Textinhalt auf die angegebene Anzahl von Zeilen.

Slots

Slot	Beschreibung
default	Der Überschriftentext innerhalb der Heading-Komponente, die einen Titel oder eine Abschnittsüberschrift für Inhalte bereitstellt.