SOrderedList <s-ordered-list>

Uma lista numerada. SOrderedList é o wrapper de Vue 3 tipado do web component <s-ordered-list> do Shopify Polaris.

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

Boas práticas

• Use quando a sequência tiver significado. Listas numeradas transmitem ordem, prioridade ou classificação, então são adequadas para instruções passo a passo ou recomendações classificadas. Se a ordem for irrelevante, use SUnorderedList no lugar.
• Escreva os itens da mesma forma. Dê a todos os itens a mesma gramática e estrutura para que a lista seja fácil de ler. Mudar de estilo de um item para outro exige mais esforço de quem lê.
• Mantenha cada item curto. Listas funcionam porque são rápidas de percorrer. Se os itens ficarem longos ou complexos, considere separá-los em seções próprias.
• Não aninhe demais. Um nível de aninhamento pode organizar pontos relacionados, mas passar de dois níveis torna a lista difícil de acompanhar e sugere que o conteúdo precisa de outra estrutura.

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

Veja as boas práticas da Shopify para <s-ordered-list> (em inglês) para todas as recomendações.

Exemplo

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	Descrição
children	any	O conteúdo da OrderededList. Aceita apenas componentes ListItem.
id	string | undefined	Um identificador exclusivo para o elemento.

Slots

Slot	Descrição
default	As entradas exibidas dentro da lista ordenada, em que cada item é numerado em sequência. Aceita apenas componentes de item de lista como filhos. Cada item de lista representa uma única entrada numerada na sequência.