Séparateur

Séparateur pour distinguer des contenus. Avec un texte, il porte une sémantique de groupe (role="separator") ; purement décoratif, il n'entre pas dans l'arbre d'accessibilité.

Utilisation de base

Utilisation de base

Un premier contenu

Un second contenu

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

<template>
  <LhDivider />
</template>

<script>
export default {}
</script>

<template>
  <LhDivider />
</template>

Séparateur vertical

Séparateur vertical

Accueil

Liste

Détail

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

<template>
  <!-- Séparateur vertical -->
  <div>
    <span>Accueil</span>
    <LhDivider direction="vertical" />
    <span>Liste</span>
    <LhDivider direction="vertical" />
    <span>Détail</span>
  </div>
</template>

<script>
export default {}
</script>

<template>
  <!-- Séparateur vertical -->
  <div>
    <span>Accueil</span>
    <LhDivider direction="vertical" />
    <span>Liste</span>
    <LhDivider direction="vertical" />
    <span>Détail</span>
  </div>
</template>

Avec texte

Le texte est pris en charge en horizontal et en vertical : en horizontal, label-position contrôle l'alignement à gauche ou à droite ; en vertical, le texte est toujours centré.

Avec texte

Jeune, j'écoute la pluie sous le pavillon…

À l'âge mûr, j'écoute la pluie dans la barque du voyageur…

Aujourd'hui, j'écoute la pluie sous la paillote du moine…

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

<template>
  <LhDivider label-position="left">Jeune, j'écoute la pluie sous le pavillon…</LhDivider>
  <LhDivider>À l'âge mûr, j'écoute la pluie dans la barque du voyageur…</LhDivider>
  <LhDivider label-position="right">Aujourd'hui, j'écoute la pluie sous la paillote du moine…</LhDivider>
</template>

<script>
export default {}
</script>

<template>
  <LhDivider label-position="left">Jeune, j'écoute la pluie sous le pavillon…</LhDivider>
  <LhDivider>À l'âge mûr, j'écoute la pluie dans la barque du voyageur…</LhDivider>
  <LhDivider label-position="right">Aujourd'hui, j'écoute la pluie sous la paillote du moine…</LhDivider>
</template>

Pointillés

Pointillés

Pointillés et texte peuvent se combiner

Style de bordure personnalisé (dotted)

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

<template>
  <LhDivider dashed />
  <LhDivider dashed>Pointillés et texte peuvent se combiner</LhDivider>
  <LhDivider border-style="dotted">Style de bordure personnalisé (dotted)</LhDivider>
</template>

<script>
export default {}
</script>

<template>
  <LhDivider dashed />
  <LhDivider dashed>Pointillés et texte peuvent se combiner</LhDivider>
  <LhDivider border-style="dotted">Style de bordure personnalisé (dotted)</LhDivider>
</template>

Divider API

Props

Propriété	Description	Type	Valeur par défaut
direction	Direction du séparateur	"horizontal" | "vertical"	'horizontal'
dashed	Pointillés	boolean	false
labelPosition	Alignement lorsque du texte est présent (horizontal uniquement, toujours centré en vertical)	"left" | "center" | "right"	'center'
borderStyle	Style de bordure (par exemple 'dotted'), réservé	string	—
sx	Propriétés de mise en page rapide (par exemple { mt: 2, w: '50%' }), converties en style inline appliqué à l'élément racine	LhSxProps	—

Slots

Slot	Description	Contenu par défaut
default	Texte du séparateur (à gauche/droite en horizontal, en haut/en bas en vertical)	—

Accessibilité

• Avec texte : role="separator", les lecteurs d'écran perçoivent la frontière de groupe ; en vertical, aria-orientation="vertical" est déclaré en complément
• Purement décoratif : role="presentation", retiré de l'arbre d'accessibilité
• Non focusable, aucune interaction clavier

Définitions de types

Les structures de types TypeScript exportées par ce composant sont présentées ci-dessous (extraction automatique à partir des sources packages/components/divider/src/types.ts et @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; la description des propriétés se trouve dans le tableau Props ci-dessus) :

LhDividerProps

export interface LhDividerProps {
  /** Direction du séparateur */
  direction?: LhDividerDirection
  /** Pointillés */
  dashed?: boolean
  /** Alignement lorsque du texte est présent */
  labelPosition?: LhDividerLabelPosition
  /** Style de bordure (par exemple 'solid' / 'dashed' / 'dotted'), prioritaire sur dashed */
  borderStyle?: string
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

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

/** Alignement lorsque du texte est présent */
export type LhDividerLabelPosition = 'left' | 'center' | 'right'

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

/** Direction du séparateur */
export type LhDividerDirection = 'horizontal' | 'vertical'