Separator
Divisor visual horizontal o vertical con marcado semántico.
Vista previa
Contenido por encima del separador.
Contenido por debajo del separador.
Este ejemplo usa estilos solo para documentación. En producción, utiliza una de las recetas incluidas (CSS, Tailwind o UnoCSS).
Separator renderiza un divisor visual entre secciones de contenido con semántica accesible. Soporta orientaciones horizontal y vertical y puede marcarse como puramente decorativo para ocultarlo del árbol de accesibilidad.
Uso
Separator tiene una sola parte Root. Configura la orientación y el estado decorativo a través de props.
import * as Separator from "@solidiom/separator"
;<Separator.Root />Instalación
Instala el paquete con pnpm add @solidiom/separator. El paquete requiere dependencias pares compatibles de solid-js y @solidjs/web.
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Orientación del separator. |
decorative | boolean | false | Cuando es true, el separator es puramente decorativo y se oculta del árbol de accesibilidad. |
Estilos
Separator lleva los atributos data-scope="separator", data-part="root" y data-orientation. Estílalo con bordes, márgenes o colores de fondo apropiados para tu sistema de diseño. El elemento se renderiza como un <div>; aplica tu receta visual usando los atributos data para seleccionar.
Interacción con teclado
Este primitivo no tiene interacción con teclado. Renderiza contenido estático que no recibe foco ni responde a eventos de teclado.
Renderizado SSR e hidratación
Separator es un elemento de visualización pasivo sin estado interactivo. Se renderiza como HTML estático y no requiere hidratación en el cliente.