SUnorderedList <s-unordered-list>

Eine Aufzählungsliste. SUnorderedList ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-unordered-list>.

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

Best Practices

• Verwenden, wenn die Reihenfolge keine Rolle spielt. Eine ungeordnete Liste stellt zusammengehörige Elemente wie Funktionen, Optionen oder Vorteile ohne Reihenfolge oder Rangfolge dar. Kommt es auf die Reihenfolge an, verwenden Sie stattdessen SOrderedList.
• Einträge parallel formulieren. Geben Sie jedem Eintrag dieselbe grammatische Struktur, damit sich die Liste leicht überfliegen lässt. Gemischte Schreibstile in einer Liste erschweren das Lesen.
• Kurze Einträge schreiben. Listen funktionieren am besten, wenn jeder Eintrag knapp ist. Werden Einträge lang oder komplex, erwägen Sie, den Inhalt in separate Abschnitte aufzuteilen.
• Verschachtelung begrenzen. Verschachtelte Listen können hierarchische Inhalte ordnen, werden aber schnell unübersichtlich. Brauchen Sie mehr als zwei Ebenen, eignet sich der Inhalt möglicherweise nicht für eine Liste.

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-unordered-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 renders its SListItem children as a bulleted list. -->
    <SUnorderedList>
      <SListItem>Free shipping over $50</SListItem>
      <SListItem>30-day returns</SListItem>
      <SListItem>24/7 customer support</SListItem>
    </SUnorderedList>
    <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 UnorderededList. Akzeptiert nur ListItem-Komponenten.
id	string | undefined	Eine eindeutige Kennung für das Element.

Slots

Slot	Beschreibung
default	Die Listeneinträge innerhalb der ungeordneten Liste, wobei jeder Eintrag mit einem Aufzählungspunkt markiert wird. Akzeptiert nur Listeneintrags-Komponenten als Kindelemente. Jeder Listeneintrag stellt einen einzelnen Eintrag mit Aufzählungspunkt in der Liste dar.