Интервал

Управление отступами между элементами макета.

Базовое использование

Базовое использование

Пресет mediumЭлементЭлемент

Пресет largeЭлементЭлемент

Число 8pxЭлементЭлемент

Вертикальное расположениеЭлементЭлемент

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

export default function Demo() {
  return (
    <LhSpace size="large">
      <span>Элемент один</span>
      <span>Элемент два</span>
      <span>Элемент три</span>
    </LhSpace>
  )
}

Space Props

Свойство	Описание	Тип	Варианты	По умолчанию
direction	Направление расположения	'horizontal' | 'vertical'	—	'horizontal'
size	Отступ	'small' | 'medium' | 'large' | number | [number, number]	—	'medium'
wrap	Разрешать ли перенос (действует только в горизонтальном направлении)	boolean	—	true
alignment	Выравнивание (align-items)	'start' | 'center' | 'end' | 'baseline'	—	'start'
sx	Сокращённые props макета	SxProps	—	—

Реализация отступов

Отступы полностью обрабатываются нативным CSS gap: предустановленные значения сопоставляются с токенами --lh-spacing-* (small=8 / medium=16 / large=24), числа воспринимаются как px, а массив [horizontal, vertical] управляет обеими осями раздельно. Компонент не оборачивает дочерние элементы, поэтому SpaceItem не нужен.

Стили

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