SDivider <s-divider>

Una línea horizontal o vertical que separa contenido. SDivider es el wrapper de Vue 3 tipado del web component <s-divider> de Shopify Polaris.

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

Buenas prácticas

• Separa solo contenido realmente distinto. Los divisores tienen sentido entre secciones claramente diferenciadas. Demasiados hacen que una interfaz parezca recargada y fragmentada, así que comprueba si el espacio en blanco agruparía el contenido igual de bien.
• Ajusta el peso a la separación. Haz que la prominencia de un divisor refleje la importancia de la separación: un corte importante entre secciones puede llevar color="strong", mientras que una agrupación menor necesita una línea más sutil o simplemente espacio.
• Sigue la dirección del diseño. Define direction para que la línea atraviese el flujo del contenido que separa, ya sea entre elementos apilados verticalmente o entre elementos dispuestos uno al lado del otro.
• Prueba primero con el espaciado. Las props de espaciado de tus componentes de diseño suelen agrupar el contenido de forma más limpia que una línea. Añade un divisor para aportar claridad, no como sustituto de un espaciado bien planificado.

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

Ejemplo

Content above the divider.Content below the divider.A stronger divider variant.

<script setup>
import { SDivider, SParagraph } from 'polaris-vue-elements'
</script>

<template>
  <SParagraph>Content above the divider.</SParagraph>
  <SDivider />
  <SParagraph>Content below the divider.</SParagraph>
  <SDivider color="strong" />
  <SParagraph color="subdued">A stronger divider variant.</SParagraph>
</template>

Props

Prop	Tipo	Descripción
color	"base" | "strong"	La prominencia visual de la línea divisoria. - base: divisor estándar para la mayoría de las separaciones (predeterminado) - strong: divisor más destacado para separaciones de secciones importantes
direction	"block" | "inline"	La orientación de la línea divisoria, usando propiedades lógicas. - inline: divisor horizontal para separar contenido apilado verticalmente - block: divisor vertical para separar contenido dispuesto horizontalmente