Divisor

Línea divisoria para separar contenidos. Con texto adquiere semántica de grupo (role="separator"); cuando es puramente decorativa no entra en el árbol de accesibilidad.

Uso básico

Uso básico

Un fragmento de contenido

Otro fragmento de contenido

<script setup lang="ts">
</script>

<template>
  <LhDivider />
</template>

<script>
export default {}
</script>

<template>
  <LhDivider />
</template>

Divisor vertical

Divisor vertical

Inicio

Lista

Detalle

<script setup lang="ts">
</script>

<template>
  <!-- Divisor vertical -->
  <div>
    <span>Inicio</span>
    <LhDivider direction="vertical" />
    <span>Lista</span>
    <LhDivider direction="vertical" />
    <span>Detalle</span>
  </div>
</template>

<script>
export default {}
</script>

<template>
  <!-- Divisor vertical -->
  <div>
    <span>Inicio</span>
    <LhDivider direction="vertical" />
    <span>Lista</span>
    <LhDivider direction="vertical" />
    <span>Detalle</span>
  </div>
</template>

Con texto

El texto admite las direcciones horizontal y vertical: en horizontal se controla la alineación izquierda/derecha con label-position; en vertical el texto siempre queda centrado.

Con texto

De joven, escuchaba la lluvia en la torre de canciones

De adulto, escuchaba la lluvia en la barca de camino

Y hoy, escucho la lluvia bajo la choza del monje

<script setup lang="ts">
</script>

<template>
  <LhDivider label-position="left">De joven, escuchaba la lluvia en la torre de canciones</LhDivider>
  <LhDivider>De adulto, escuchaba la lluvia en la barca de camino</LhDivider>
  <LhDivider label-position="right">Y hoy, escucho la lluvia bajo la choza del monje</LhDivider>
</template>

<script>
export default {}
</script>

<template>
  <LhDivider label-position="left">De joven, escuchaba la lluvia en la torre de canciones</LhDivider>
  <LhDivider>De adulto, escuchaba la lluvia en la barca de camino</LhDivider>
  <LhDivider label-position="right">Y hoy, escucho la lluvia bajo la choza del monje</LhDivider>
</template>

Línea discontinua

Línea discontinua

Líneas discontinuas y texto pueden combinarse

Estilo de borde personalizado (dotted)

<script setup lang="ts">
</script>

<template>
  <LhDivider dashed />
  <LhDivider dashed>Líneas discontinuas y texto pueden combinarse</LhDivider>
  <LhDivider border-style="dotted">Estilo de borde personalizado (dotted)</LhDivider>
</template>

<script>
export default {}
</script>

<template>
  <LhDivider dashed />
  <LhDivider dashed>Líneas discontinuas y texto pueden combinarse</LhDivider>
  <LhDivider border-style="dotted">Estilo de borde personalizado (dotted)</LhDivider>
</template>

Divider API

Props

Prop	Descripción	Tipo	Predeterminado
direction	Dirección del divisor	"horizontal" | "vertical"	'horizontal'
dashed	Si es línea discontinua	boolean	false
labelPosition	Posición de alineación del texto (solo dirección horizontal; en vertical siempre centrado)	"left" | "center" | "right"	'center'
borderStyle	Estilo del borde (p. ej., 'dotted'), reservado	string	—
sx	Props de disposición rápida (p. ej., { mt: 2, w: '50%' }); se convierten en estilos en línea aplicados al elemento raíz	LhSxProps	—

Slots

Slot	Descripción	Contenido predeterminado
default	Texto del divisor (en horizontal se dispone a izquierda y derecha; en vertical, arriba y abajo)	—

Accesibilidad

• Con texto: role="separator"; los lectores de pantalla perciben el límite del grupo; en vertical se declara además aria-orientation="vertical"
• Puramente decorativo: role="presentation", se elimina del árbol de accesibilidad
• No es enfocable y no tiene interacción de teclado

Definiciones de tipos

Las estructuras de tipos TypeScript exportadas por este componente (extraídas automáticamente de packages/components/divider/src/types.ts y de las fuentes @lh-ui/share/core/*; abre cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhDividerProps

export interface LhDividerProps {
  /** Dirección del divisor */
  direction?: LhDividerDirection
  /** Si es línea discontinua */
  dashed?: boolean
  /** Posición de alineación del texto */
  labelPosition?: LhDividerLabelPosition
  /** Estilo del borde (p. ej., 'solid' / 'dashed' / 'dotted'); prevalece sobre dashed */
  borderStyle?: string
  /** Props de disposición rápida */
  sx?: LhSxProps
}

LhDividerLabelPosition _{(de @lh-ui/share/core/divider)}

/** Posición de alineación del texto */
export type LhDividerLabelPosition = 'left' | 'center' | 'right'

LhDividerDirection _{(de @lh-ui/share/core/divider)}

/** Dirección del divisor */
export type LhDividerDirection = 'horizontal' | 'vertical'