SUnorderedList <s-unordered-list>

Una lista con viñetas. SUnorderedList es el wrapper de Vue 3 tipado del web component <s-unordered-list> de Shopify Polaris.

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

Buenas prácticas

• Úsala cuando el orden no importa. Una lista no ordenada presenta elementos relacionados, como funciones, opciones o ventajas, sin secuencia ni clasificación. Cuando el orden importe, usa SOrderedList en su lugar.
• Mantén los elementos paralelos. Da a cada elemento la misma estructura gramatical para que la lista sea fácil de revisar. Mezclar estilos de redacción en una misma lista la hace más difícil de leer.
• Escribe elementos cortos. Las listas funcionan mejor cuando cada elemento es breve. Si los elementos se vuelven largos o complejos, considera dividir el contenido en secciones separadas.
• Limita el anidamiento. Las listas anidadas pueden organizar contenido jerárquico, pero enseguida se vuelven difíciles de seguir. Si necesitas más de dos niveles, puede que el contenido no sea adecuado para una lista.

Consulta las buenas prácticas de Shopify para <s-unordered-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 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	Tipo	Descripción
children	any	El contenido de la UnorderededList. 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 no ordenada, donde cada elemento se marca con una viñeta. Solo acepta componentes de elemento de lista como hijos. Cada elemento de lista representa una única entrada con viñeta de la lista.