SUnorderedList <s-unordered-list>

Une liste à puces. SUnorderedList est le wrapper Vue 3 typé du web component <s-unordered-list> de Shopify Polaris.

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

Bonnes pratiques

• Utilisez-la lorsque l'ordre n'a pas d'importance. Une liste non ordonnée présente des éléments liés, comme des fonctionnalités, des options ou des avantages, sans séquence ni classement. Lorsque l'ordre compte, utilisez plutôt SOrderedList.
• Gardez des éléments parallèles. Donnez à chaque élément la même structure grammaticale pour que la liste soit facile à parcourir. Mélanger les styles d'écriture dans une même liste la rend plus difficile à lire.
• Rédigez des éléments courts. Les listes fonctionnent mieux lorsque chaque élément est bref. Si les éléments deviennent longs ou complexes, envisagez de répartir le contenu en sections distinctes.
• Limitez l'imbrication. Les listes imbriquées peuvent organiser un contenu hiérarchique, mais elles deviennent vite difficiles à suivre. Si vous avez besoin de plus de deux niveaux, le contenu ne se prête peut-être pas à une liste.

Consultez les bonnes pratiques de Shopify pour <s-unordered-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 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	Type	Description
children	any	Le contenu de l'UnorderededList. 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 non ordonnée, chaque élément étant marqué d'une puce. N'accepte que des composants list item comme enfants. Chaque list item représente une entrée à puce de la liste.