Espacement

Conteneur de mise en page fournissant un espacement uniforme aux composants enfants, basé sur la propriété CSS native gap. Conteneur de mise en page pur (role="presentation"), qui ne participe pas à l'arbre d'accessibilité.

Utilisation de base

Espacement horizontal

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

<template>
  <LhSpace>
    <LhButton>Bouton 1</LhButton>
    <LhButton>Bouton 2</LhButton>
    <LhButton>Bouton 3</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <LhSpace>
    <LhButton>Bouton 1</LhButton>
    <LhButton>Bouton 2</LhButton>
    <LhButton>Bouton 3</LhButton>
  </LhSpace>
</template>

Espacement vertical

Espacement vertical

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

<template>
  <LhSpace direction="vertical">
    <LhButton>Bouton 1</LhButton>
    <LhButton>Bouton 2</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <LhSpace direction="vertical">
    <LhButton>Bouton 1</LhButton>
    <LhButton>Bouton 2</LhButton>
  </LhSpace>
</template>

Taille d'espacement

Trois niveaux prédéfinis mappés aux tokens de thème --lh-spacing-* ; un nombre en pixels ou un tableau [horizontal, vertical] est également accepté.

Taille d'espacement

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

<template>
  <!-- Niveau prédéfini small -->
  <LhSpace size="small">
    <LhButton>small</LhButton>
    <LhButton>small</LhButton>
  </LhSpace>
  <!-- Niveau prédéfini medium -->
  <LhSpace size="medium">
    <LhButton>medium</LhButton>
    <LhButton>medium</LhButton>
  </LhSpace>
  <!-- Niveau prédéfini large -->
  <LhSpace size="large">
    <LhButton>large</LhButton>
    <LhButton>large</LhButton>
  </LhSpace>
  <!-- 8 pixels personnalisés -->
  <LhSpace :size="8">
    <LhButton>8px</LhButton>
    <LhButton>8px</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <!-- Niveau prédéfini small -->
  <LhSpace size="small">
    <LhButton>small</LhButton>
    <LhButton>small</LhButton>
  </LhSpace>
  <!-- Niveau prédéfini medium -->
  <LhSpace size="medium">
    <LhButton>medium</LhButton>
    <LhButton>medium</LhButton>
  </LhSpace>
  <!-- Niveau prédéfini large -->
  <LhSpace size="large">
    <LhButton>large</LhButton>
    <LhButton>large</LhButton>
  </LhSpace>
  <!-- 8 pixels personnalisés -->
  <LhSpace :size="8">
    <LhButton>8px</LhButton>
    <LhButton>8px</LhButton>
  </LhSpace>
</template>

Retour à la ligne et alignement

Retour à la ligne

Étiquette 1Étiquette 2Étiquette 3Étiquette 4Étiquette 5Étiquette 6Étiquette 7Étiquette 8Étiquette 9Étiquette 10Étiquette 11Étiquette 12

alignment contrôle l'alignement des éléments enfants : centré par défaut, il peut être réglé sur l'alignement en début ou en fin.

Alignement

Contenu plus haut

Contenu plus haut

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

<template>
  <!-- Retour à la ligne autorisé -->
  <LhSpace wrap>
    <LhTag v-for="n in 12" :key="n">Étiquette {{ n }}</LhTag>
  </LhSpace>
  <!-- Alignement start -->
  <LhSpace alignment="start">
    <LhButton>Alignement start</LhButton>
    <span style="height: 48px; line-height: 48px">Contenu plus haut</span>
  </LhSpace>
  <!-- Alignement end -->
  <LhSpace alignment="end">
    <LhButton>Alignement end</LhButton>
    <span style="height: 48px; line-height: 48px">Contenu plus haut</span>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <!-- Retour à la ligne autorisé -->
  <LhSpace wrap>
    <LhTag v-for="n in 12" :key="n">Étiquette {{ n }}</LhTag>
  </LhSpace>
  <!-- Alignement start -->
  <LhSpace alignment="start">
    <LhButton>Alignement start</LhButton>
    <span style="height: 48px; line-height: 48px">Contenu plus haut</span>
  </LhSpace>
  <!-- Alignement end -->
  <LhSpace alignment="end">
    <LhButton>Alignement end</LhButton>
    <span style="height: 48px; line-height: 48px">Contenu plus haut</span>
  </LhSpace>
</template>

API Space

Props

Prop	Description	Type	Valeur par défaut
direction	Direction d'arrangement	"horizontal" | "vertical"	'horizontal'
size	Espacement : niveau prédéfini / nombre en pixels / [horizontal, vertical]	number | "small" | "medium" | "large" | [number, number]	'medium'
wrap	Autoriser ou non le retour à la ligne (direction horizontale uniquement)	boolean	true
alignment	Alignement	"start" | "center" | "end" | "baseline"	'start'
sx	Props de mise en page sx (ex. { mt: 2 }), fusionnées dans les styles inline avec une priorité supérieure à alignment	LhSxProps	—

Accessibilité

• Le conteneur est un élément de mise en page pur avec role="presentation", il n'intercepte pas le focus
• L'espacement est basé sur la propriété CSS native gap, sans élément DOM enveloppant les enfants

Définitions de types

Ce composant exporte les structures de types TypeScript suivantes (extraites automatiquement de packages/components/space/src/types.ts et des sources @lh-ui/share/core/* ; cliquez sur chaque entrée pour déplier la définition complète ; la description des props se trouve dans le tableau Props ci-dessus) :

LhSpaceProps

export interface LhSpaceProps {
  /** Direction d'arrangement */
  direction?: 'horizontal' | 'vertical'
  /** Espacement : niveau prédéfini / nombre en pixels / [horizontal, vertical] */
  size?: LhSpaceSizeInput
  /** Autoriser ou non le retour à la ligne (direction horizontale uniquement) */
  wrap?: boolean
  /** Alignement */
  alignment?: LhSpaceAlignment
  /** Props de mise en page sx */
  sx?: LhSxProps
}

LhSpaceSizeInput _{(provenant de @lh-ui/share/core/space)}

/**
 * Espacement normalisé : les niveaux prédéfinis sont mappés aux tokens d'espacement,
 * les nombres sont interprétés en px
 */
export type LhSpaceSizeInput = 'small' | 'medium' | 'large' | number | [number, number]

LhSpaceAlignment _{(provenant de @lh-ui/share/core/space)}

/** Mode d'alignement de l'espacement */
export type LhSpaceAlignment = 'start' | 'center' | 'end' | 'baseline'