Separator

Ejemplos de separator horizontal y vertical.

Paquete: @solidiom/separator
Versión: 0.0.1-next.0
Estado: stable

Ejemplos

import * as Separator from "@solidiom/separator"

;<section>
  <p>Contenido de la sección por encima del divisor.</p>
  <Separator.Root />
  <p>Contenido de la sección por debajo del divisor.</p>
</section>

Variantes

Usa el prop orientation para separadores verticales en diseños lado a lado.

;<div style={{ display: "flex" }}>
  <aside>Barra lateral</aside>
  <Separator.Root orientation="vertical" />
  <main>Contenido principal</main>
</div>

Decorativo

Cuando el divisor es puramente visual y no carries significado estructural, establece decorative para ocultarlo de las tecnologías de asistencia.

;<Separator.Root decorative />

Contenido por encima del separador.

Contenido por debajo del separador.

Ver código fuente

        export function Root(props: RootProps) {
  const orientation = () => props.orientation ?? "horizontal"
  const role = () => (props.decorative ? "none" : "separator")

  return (
    <div
      role={role()}
      aria-orientation={props.decorative ? undefined : orientation()}
      class={props.class}
      style={props.style}
      {...applySemanticAttrs({ scope: "separator", part: "root", orientation: orientation() })}
    />
  )
}