Grille

Système à 24 colonnes, implémenté en CSS Grid (grid-template-columns: repeat(24, 1fr)) : span / offset sont directement mappés sur grid-column, sans conversion de pourcentages en flex.

Utilisation de base

Utilisation de base

span 12

span 12

span 8

span 8

span 8

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

<template>
  <LhRow :gutter="12">
    <LhCol :span="12">span 12</LhCol>
    <LhCol :span="12">span 12</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
  </LhRow>
</template>

<script>
export default {}
</script>

<template>
  <LhRow :gutter="12">
    <LhCol :span="12">span 12</LhCol>
    <LhCol :span="12">span 12</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
  </LhRow>
</template>

Décalage et alignement

Décalage / alignement

offset 3

Centré

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

<template>
  <LhRow justify="center" align="middle" :gutter="12">
    <LhCol :span="6" :offset="3">offset 3</LhCol>
    <LhCol :span="6">Centré</LhCol>
  </LhRow>
</template>

<script>
export default {}
</script>

<template>
  <LhRow justify="center" align="middle" :gutter="12">
    <LhCol :span="6" :offset="3">offset 3</LhCol>
    <LhCol :span="6">Centré</LhCol>
  </LhRow>
</template>

Retour à la ligne

Lorsque wrap est désactivé, les enfants sont forcés sur une seule ligne (associé à un overflow, on obtient une grille à défilement horizontal).

Pas de retour à la ligne

span 8

span 8

span 8

span 8

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

<template>
  <!-- Pas de retour à la ligne -->
  <LhRow :wrap="false" :gutter="12">
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
  </LhRow>
</template>

<script>
export default {}
</script>

<template>
  <!-- Pas de retour à la ligne -->
  <LhRow :wrap="false" :gutter="12">
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
  </LhRow>
</template>

Points de rupture responsifs

xs / sm / md / lg / xl permettent de déclarer les tailles par palier (seuils Tailwind : 640 / 768 / 1024 / 1280) ; les paliers non déclarés sont remplacés par ceux de plus petite taille (xs sert toujours de repli) et, lorsqu'aucun point de rupture n'est déclaré, c'est span qui s'applique. Redimensionnez la fenêtre du navigateur pour observer le comportement.

Responsive

span 24 / md 12 / xl 8

span 24 / md 12 / xl 8

span 24 / xl 8

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

<template>
  <LhRow :gutter="12">
    <LhCol :span="24" :md="12" :xl="8">span 24 / md 12 / xl 8</LhCol>
    <LhCol :span="24" :md="12" :xl="8">span 24 / md 12 / xl 8</LhCol>
    <LhCol :span="24" :xl="8">span 24 / xl 8</LhCol>
  </LhRow>
</template>

<script>
export default {}
</script>

<template>
  <LhRow :gutter="12">
    <LhCol :span="24" :md="12" :xl="8">span 24 / md 12 / xl 8</LhCol>
    <LhCol :span="24" :md="12" :xl="8">span 24 / md 12 / xl 8</LhCol>
    <LhCol :span="24" :xl="8">span 24 / xl 8</LhCol>
  </LhRow>
</template>

Translation (push / pull)

push / pull décalent le point de départ par rapport à offset (vers la droite / vers la gauche), pour l'ajustement fin de l'alignement des colonnes.

push / pull

span 8 push 8

span 8

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

<template>
  <LhRow :gutter="12">
    <LhCol :span="8" :push="8">span 8 push 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
  </LhRow>
</template>

<script>
export default {}
</script>

<template>
  <LhRow :gutter="12">
    <LhCol :span="8" :push="8">span 8 push 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
  </LhRow>
</template>

Recul et responsive

pull fait reculer la colonne vers la gauche du nombre de colonnes indiqué (comportement inverse d'offset) ; xs / sm / md / lg / xl déclarent le span par point de rupture, et sizes permet de les déclarer tous en une seule fois.

pull / points de rupture responsifs

pull 2

Responsive

sizes

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

<template>
  <LhRow :gutter="12">
    <LhCol :span="8" :pull="2">pull 2</LhCol>
    <LhCol :span="12" :xs="24" :sm="12" :lg="8">Responsive</LhCol>
    <LhCol :span="10" :sizes="{ xs: 24, md: 12, xl: 6 }">sizes</LhCol>
  </LhRow>
</template>

<script>
export default {}
</script>

<template>
  <LhRow :gutter="12">
    <LhCol :span="8" :pull="2">pull 2</LhCol>
    <LhCol :span="12" :xs="24" :sm="12" :lg="8">Responsive</LhCol>
    <LhCol :span="10" :sizes="{ xs: 24, md: 12, xl: 6 }">sizes</LhCol>
  </LhRow>
</template>

API

LhRow Props

Propriété	Description	Type	Valeur par défaut
justify	Répartition sur l'axe principal	'start' | 'center' | 'end' | 'space-between' | 'space-around'	'start'
align	Alignement sur l'axe secondaire	'top' | 'middle' | 'bottom'	'top'
gutter	Espacement entre les colonnes (px ou [horizontal, vertical])	number | [number, number]	0
wrap	Activer le retour à la ligne	boolean	true
sx	Propriétés de mise en page rapide sx	LhSxProps	—

LhCol Props

Propriété	Description	Type	Valeur par défaut
span	Nombre de colonnes occupées (système à 24 colonnes)	number	—
offset	Nombre de colonnes de décalage à gauche	number	—
push	Nombre de colonnes de translation vers la droite	number	—
pull	Nombre de colonnes de translation vers la gauche	number	—
xs	Actif sous 640 px (en l'absence de déclaration, repli sur le palier inférieur)	LhColSize	—
sm	Actif à partir de 640 px	LhColSize	—
md	Actif à partir de 768 px	LhColSize	—
lg	Actif à partir de 1024 px	LhColSize	—
xl	Actif à partir de 1280 px	LhColSize	—
sizes	Déclaration par points de rupture en une seule fois (équivalent à xs~xl, au choix)	Partial<Record<LhGridBreakpoint, LhColSize>>	—
sx	Propriétés de mise en page rapide sx	LhSxProps	—

Accessibilité

• Composant de pure mise en page, sans sémantique d'interaction : la grille ne doit pas servir de support à des listes nécessitant une structure sémantique (utilisez plutôt List / Table, par exemple)

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/grid/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) :

LhRowJustify

/** Répartition des enfants sur l'axe principal */
export type LhRowJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around'

LhRowAlign

/** Alignement des enfants sur l'axe secondaire */
export type LhRowAlign = 'top' | 'middle' | 'bottom'

LhRowProps

export interface LhRowProps {
  /** Répartition sur l'axe principal */
  justify?: LhRowJustify
  /** Alignement sur l'axe secondaire */
  align?: LhRowAlign
  /** Espacement entre les colonnes (px ou [horizontal, vertical]) */
  gutter?: number | [number, number]
  /** Activer le retour à la ligne */
  wrap?: boolean
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

LhColProps

export interface LhColProps {
  /** Nombre de colonnes occupées (système à 24 colonnes) */
  span?: number
  /** Nombre de colonnes de décalage à gauche */
  offset?: number
  /** Nombre de colonnes de translation vers la droite */
  push?: number
  /** Nombre de colonnes de translation vers la gauche */
  pull?: number
  /** Actif sous 640 px (en l'absence de déclaration, repli sur le palier inférieur) */
  xs?: LhColSize
  /** Actif à partir de 640 px */
  sm?: LhColSize
  /** Actif à partir de 768 px */
  md?: LhColSize
  /** Actif à partir de 1024 px */
  lg?: LhColSize
  /** Actif à partir de 1280 px */
  xl?: LhColSize
  /** Tailles responsives déclarées par points de rupture (équivalent à xs~xl, au choix) */
  sizes?: LhBreakpointSizes
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

LhColSize _{(provient de @lh-ui/share/core/grid)}

/** Configuration de taille du Col : nombre ou objet (un objet par point de rupture est également pris en charge) */
export type LhColSize = number | LhGridSpan

LhGridSpan _{(provient de @lh-ui/share/core/grid)}

/** Taille de grille (span de 1 à 24, ou objet avec offset) */
export interface LhGridSpan {
  span?: number
  offset?: number
  push?: number
  pull?: number
}

LhBreakpointSizes _{(provient de @lh-ui/share/core/grid)}

/** Tailles responsives déclarées par point de rupture (les paliers non déclarés sont remplacés par ceux de plus petite taille, xs sert toujours de repli) */
export type LhBreakpointSizes = Partial<Record<LhGridBreakpoint, LhColSize>>

LhGridBreakpoint _{(provient de @lh-ui/share/core/grid)}

/** Points de rupture de la grille */
export type LhGridBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'

Constantes

Les constantes publiques utilisées par ce composant sont les suivantes (cliquez sur l'entrée correspondante dans la colonne « Type / Valeur par défaut » du tableau Props pour y accéder) :

LH_GRID_COLUMNS _{(provient de @lh-ui/share/core/grid)}

/** Nombre total de colonnes de la grille */
export const LH_GRID_COLUMNS = 24

LH_GRID_BREAKPOINTS _{(provient de @lh-ui/share/core/grid)}

/**
 * Points de rupture responsifs (style Tailwind, largeur minimale en px) :
 * xs est le palier par défaut (<640), les autres s'appliquent à partir de leur seuil.
 */
export const LH_GRID_BREAKPOINTS: Record<LhGridBreakpoint, number> = {
  xs: 0,
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
}

LH_GRID_BREAKPOINT_ORDER _{(provient de @lh-ui/share/core/grid)}

/** Ordre stable des points de rupture, du plus grand au plus petit */
export const LH_GRID_BREAKPOINT_ORDER: LhGridBreakpoint[] = ['xl', 'lg', 'md', 'sm', 'xs']