SDivider <s-divider>

Eine horizontale oder vertikale Linie, die Inhalte voneinander trennt. SDivider ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-divider>.

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

Best Practices

• Nur wirklich unterschiedliche Inhalte trennen. Divider gehören zwischen klar voneinander abgegrenzte Abschnitte. Zu viele lassen eine Oberfläche unruhig und zerstückelt wirken; prüfen Sie daher, ob Weißraum den Inhalt ebenso gut gruppieren würde.
• Gewicht an die Trennung anpassen. Die Auffälligkeit eines Dividers sollte widerspiegeln, wie wichtig die Trennung ist: Ein großer Abschnittswechsel verträgt color="strong", eine kleine Gruppierung braucht eine dezentere Linie oder nur Abstand.
• Der Layoutrichtung folgen. Setzen Sie direction so, dass die Linie quer zum Fluss der getrennten Inhalte verläuft, zwischen vertikal gestapelten oder zwischen nebeneinander angeordneten Elementen.
• Zuerst Abstände ausprobieren. Abstands-Props an Layout-Komponenten gruppieren Inhalte oft sauberer als eine Linie. Ein Divider soll Klarheit schaffen, nicht gut geplante Abstände ersetzen.

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

Beispiel

Content above the divider.Content below the divider.A stronger divider variant.

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

<template>
  <SParagraph>Content above the divider.</SParagraph>
  <SDivider />
  <SParagraph>Content below the divider.</SParagraph>
  <SDivider color="strong" />
  <SParagraph color="subdued">A stronger divider variant.</SParagraph>
</template>

Props

Prop	Typ	Beschreibung
color	"base" | "strong"	Die visuelle Prominenz der Trennlinie. - base: Standard-Trennlinie für die meisten Trennungen (Standard) - strong: Auffälligere Trennlinie für größere Abschnittswechsel
direction	"block" | "inline"	Die Ausrichtung der Trennlinie mithilfe logischer Eigenschaften. - inline: Horizontale Trennlinie zum Trennen vertikal gestapelter Inhalte - block: Vertikale Trennlinie zum Trennen horizontal angeordneter Inhalte