Séparateur

Trait de séparation entre des contenus.

Utilisation de base

Utilisation de base

L'eau printanière plus verte que le ciel, un batelier peint endormi sous la pluie.

Auprès de l'âtre, belle comme la lune, poignets blancs comme givre et neige.

Groupe aligné à gauche

Groupe aligné à droite

Vertical

Séparateur

Haut

Encre de Chine

Bas

import { LhDivider } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <span>L'eau de printemps est plus verte que le ciel, la barque peinte s'endort sous la pluie.</span>
      <LhDivider />
      <span>Au bord du foyer, belle comme la lune, les poignets blancs comme neige et givre.</span>
      <LhDivider dashed />
      <LhDivider labelPosition="left">Groupe aligné à gauche</LhDivider>
    </>
  )
}

Divider Props

Prop	Description	Type	Options	Valeur par défaut
direction	Direction	'horizontal' | 'vertical'	—	'horizontal'
dashed	En pointillés ou non	boolean	—	false
labelPosition	Position du texte (effective en direction horizontale ; toujours centré en vertical)	'left' | 'center' | 'right'	—	'center'
borderStyle	Style de bordure (prime sur dashed lorsqu'il est explicitement fourni)	string	'solid' | 'dashed' | 'dotted' …	—
sx	Raccourci de mise en page	SxProps	—	—

Accessibilité

Un séparateur portant du texte est rendu avec role="separator" (véritable sémantique de regroupement) ; un séparateur purement décoratif utilise role="presentation" et est retiré de l'arbre d'accessibilité. aria-orientation="vertical" n'est produit que dans le cas « texte et direction verticale ».

Comportement connu

borderStyle="dotted" produit le modificateur lh-divider--dotted, mais la couche de styles n'implémente actuellement que --dashed : le rendu retombe sur un trait plein — comportement identique à lh-ui-plus.

Styles

import '@lh-ui/react/style/divider'