SOrderedList <s-ordered-list>

Une liste numérotée. SOrderedList est le wrapper Vue 3 typé du web component <s-ordered-list> de Shopify Polaris.

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

Bonnes pratiques

• Utilisez-la lorsque l'ordre a un sens. Les listes numérotées expriment un ordre, une priorité ou un classement : elles conviennent aux instructions pas à pas ou aux recommandations classées. Si l'ordre n'a pas d'importance, utilisez plutôt SUnorderedList.
• Rédigez les éléments de la même façon. Donnez à chaque élément la même grammaire et la même structure pour que la liste se lise facilement. Changer de style d'un élément à l'autre demande plus d'effort au lecteur.
• Gardez chaque élément court. Les listes fonctionnent parce qu'elles se parcourent vite. Si les éléments deviennent longs ou complexes, envisagez de les transformer en sections distinctes.
• N'imbriquez pas trop profondément. Un niveau d'imbrication peut organiser des points liés, mais au-delà de deux niveaux la liste devient difficile à suivre, signe que le contenu a besoin d'une autre structure.

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

Consultez les bonnes pratiques de Shopify pour <s-ordered-list> (en anglais) pour l'ensemble des recommandations.

Exemple

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	Type	Description
children	any	Le contenu de l'OrderededList. N'accepte que des composants ListItem.
id	string | undefined	Un identifiant unique pour l'élément.

Slots

Slot	Description
default	Les entrées affichées dans la liste ordonnée, chaque élément étant numéroté séquentiellement. N'accepte que des composants list item comme enfants. Chaque list item représente une entrée numérotée de la séquence.