SOrderedList <s-ordered-list>

Una lista numerada. SOrderedList es el wrapper de Vue 3 tipado del web component <s-ordered-list> de Shopify Polaris.

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

Buenas prácticas

• Úsala cuando el orden tenga significado. Las listas numeradas transmiten orden, prioridad o clasificación, por lo que son adecuadas para instrucciones paso a paso o recomendaciones clasificadas. Si el orden no importa, usa SUnorderedList en su lugar.
• Redacta los elementos de la misma forma. Da a cada elemento la misma gramática y estructura para que la lista se lea con facilidad. Cambiar de estilo de un elemento a otro exige más esfuerzo a los lectores.
• Mantén cada elemento breve. Las listas funcionan porque se recorren rápido. Si los elementos se vuelven largos o complejos, considera separarlos en sus propias secciones.
• No anides demasiado. Un nivel de anidamiento puede organizar puntos relacionados, pero pasar de dos niveles hace que la lista sea difícil de seguir y sugiere que el contenido necesita otra estructura.

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

Consulta las buenas prácticas de Shopify para <s-ordered-list> (en inglés) para ver todas las recomendaciones.

Ejemplo

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	Tipo	Descripción
children	any	El contenido de la OrderededList. Solo acepta componentes ListItem.
id	string | undefined	Un identificador único para el elemento.

Slots

Slot	Descripción
default	Las entradas que se muestran dentro de la lista ordenada, donde cada elemento se numera de forma secuencial. Solo acepta componentes de elemento de lista como hijos. Cada elemento de lista representa una única entrada numerada de la secuencia.