SOrderedList <s-ordered-list>

Eine nummerierte Liste. SOrderedList ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-ordered-list>.

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

Best Practices

• Verwenden, wenn die Reihenfolge Bedeutung hat. Nummerierte Listen vermitteln Reihenfolge, Priorität oder Rangfolge und eignen sich daher für Schritt-für-Schritt-Anleitungen oder gereihte Empfehlungen. Ist die Reihenfolge egal, verwenden Sie stattdessen SUnorderedList.
• Einträge einheitlich formulieren. Geben Sie jedem Eintrag dieselbe Grammatik und Struktur, damit sich die Liste leicht liest. Wechselnde Stile von Eintrag zu Eintrag machen das Lesen mühsamer.
• Jeden Eintrag kurz halten. Listen funktionieren, weil sie sich schnell überfliegen lassen. Werden Einträge lang oder kompliziert, erwägen Sie, sie in eigene Abschnitte auszulagern.
• Nicht zu tief verschachteln. Eine Verschachtelungsebene kann zusammengehörige Punkte ordnen, aber mehr als zwei Ebenen werden schwer nachvollziehbar und deuten darauf hin, dass der Inhalt eine andere Struktur braucht.

<SOrderedList>
  <SListItem>Choose a shipping carrier</SListItem>
  <SListItem>Print the shipping label</SListItem>
  <SListItem>Mark the order as fulfilled</SListItem>
</SOrderedList>

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

Beispiel

Free shipping over $5030-day returns24/7 customer supportAdd items to your cartReview your orderConfirm and check out

<script setup>
import { SUnorderedList, SOrderedList, SListItem, SStack } from 'polaris-vue-elements'
</script>

<template>
  <SStack direction="inline" gap="large-500" alignItems="start">
    <SUnorderedList>
      <SListItem>Free shipping over $50</SListItem>
      <SListItem>30-day returns</SListItem>
      <SListItem>24/7 customer support</SListItem>
    </SUnorderedList>
    <!-- SOrderedList renders its SListItem children as a numbered list. -->
    <SOrderedList>
      <SListItem>Add items to your cart</SListItem>
      <SListItem>Review your order</SListItem>
      <SListItem>Confirm and check out</SListItem>
    </SOrderedList>
  </SStack>
</template>

Props

Prop	Typ	Beschreibung
children	any	Der Inhalt der OrderededList. Akzeptiert nur ListItem-Komponenten.
id	string | undefined	Eine eindeutige Kennung für das Element.

Slots

Slot	Beschreibung
default	Die Listeneinträge innerhalb der geordneten Liste, wobei jeder Eintrag fortlaufend nummeriert wird. Akzeptiert nur Listeneintrags-Komponenten als Kindelemente. Jeder Listeneintrag stellt einen einzelnen nummerierten Eintrag der Folge dar.