Интервал

Контейнер-раскладка, задающий единые отступы между дочерними компонентами; реализован на основе нативного CSS gap. Это контейнер-раскладка (role="presentation"), не участвующий в дереве доступности.

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

Горизонтальные отступы

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

<template>
  <LhSpace>
    <LhButton>Кнопка 1</LhButton>
    <LhButton>Кнопка 2</LhButton>
    <LhButton>Кнопка 3</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <LhSpace>
    <LhButton>Кнопка 1</LhButton>
    <LhButton>Кнопка 2</LhButton>
    <LhButton>Кнопка 3</LhButton>
  </LhSpace>
</template>

Вертикальные отступы

Вертикальные отступы

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

<template>
  <LhSpace direction="vertical">
    <LhButton>Кнопка 1</LhButton>
    <LhButton>Кнопка 2</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <LhSpace direction="vertical">
    <LhButton>Кнопка 1</LhButton>
    <LhButton>Кнопка 2</LhButton>
  </LhSpace>
</template>

Размер отступа

Три предустановленных варианта отображаются на theme-токены --lh-spacing-*; также поддерживаются числа в пикселях или массив [горизонталь, вертикаль].

Размер отступа

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

<template>
  <!-- Предустановка small -->
  <LhSpace size="small">
    <LhButton>small</LhButton>
    <LhButton>small</LhButton>
  </LhSpace>
  <!-- Предустановка medium -->
  <LhSpace size="medium">
    <LhButton>medium</LhButton>
    <LhButton>medium</LhButton>
  </LhSpace>
  <!-- Предустановка large -->
  <LhSpace size="large">
    <LhButton>large</LhButton>
    <LhButton>large</LhButton>
  </LhSpace>
  <!-- Значение 8px -->
  <LhSpace :size="8">
    <LhButton>8px</LhButton>
    <LhButton>8px</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <!-- Предустановка small -->
  <LhSpace size="small">
    <LhButton>small</LhButton>
    <LhButton>small</LhButton>
  </LhSpace>
  <!-- Предустановка medium -->
  <LhSpace size="medium">
    <LhButton>medium</LhButton>
    <LhButton>medium</LhButton>
  </LhSpace>
  <!-- Предустановка large -->
  <LhSpace size="large">
    <LhButton>large</LhButton>
    <LhButton>large</LhButton>
  </LhSpace>
  <!-- Значение 8px -->
  <LhSpace :size="8">
    <LhButton>8px</LhButton>
    <LhButton>8px</LhButton>
  </LhSpace>
</template>

Перенос и выравнивание

Перенос строк

Тег 1Тег 2Тег 3Тег 4Тег 5Тег 6Тег 7Тег 8Тег 9Тег 10Тег 11Тег 12

alignment управляет выравниванием дочерних элементов: по умолчанию по центру, можно переключить на выравнивание по началу или по концу.

Выравнивание

Высокий контент

Высокий контент

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

<template>
  <!-- Разрешить перенос строк -->
  <LhSpace wrap>
    <LhTag v-for="n in 12" :key="n">Тег {{ n }}</LhTag>
  </LhSpace>
  <!-- Выравнивание start -->
  <LhSpace alignment="start">
    <LhButton>Выравнивание start</LhButton>
    <span style="height: 48px; line-height: 48px">Высокий контент</span>
  </LhSpace>
  <!-- Выравнивание end -->
  <LhSpace alignment="end">
    <LhButton>Выравнивание end</LhButton>
    <span style="height: 48px; line-height: 48px">Высокий контент</span>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <!-- Разрешить перенос строк -->
  <LhSpace wrap>
    <LhTag v-for="n in 12" :key="n">Тег {{ n }}</LhTag>
  </LhSpace>
  <!-- Выравнивание start -->
  <LhSpace alignment="start">
    <LhButton>Выравнивание start</LhButton>
    <span style="height: 48px; line-height: 48px">Высокий контент</span>
  </LhSpace>
  <!-- Выравнивание end -->
  <LhSpace alignment="end">
    <LhButton>Выравнивание end</LhButton>
    <span style="height: 48px; line-height: 48px">Высокий контент</span>
  </LhSpace>
</template>

Space API

Props

Свойство	Описание	Тип	По умолчанию
direction	Направление расположения	"horizontal" | "vertical"	'horizontal'
size	Отступ: предустановка / число в пикселях / [горизонталь, вертикаль]	number | "small" | "medium" | "large" | [number, number]	'medium'
wrap	Разрешить ли перенос строк (только для горизонтального направления)	boolean	true
alignment	Выравнивание	"start" | "center" | "end" | "baseline"	'start'
sx	Свойство быстрой вёрстки (например { mt: 2 }), объединяется с инлайновыми стилями и имеет приоритет выше alignment	LhSxProps	—

Доступность

• Контейнер — элемент-раскладка с role="presentation", не перехватывает фокус
• Отступы реализованы через нативный CSS gap, без DOM-обёрток для дочерних элементов

Определения типов

Компонент экспортирует следующие структуры TypeScript (автоматически извлечено из исходников packages/components/space/src/types.ts и @lh-ui/share/core/*; раскройте каждый пункт, чтобы увидеть полное определение; описания свойств — в таблице Props выше):

LhSpaceProps

export interface LhSpaceProps {
  /** Направление расположения */
  direction?: 'horizontal' | 'vertical'
  /** Отступ: предустановка / число в пикселях / [горизонталь, вертикаль] */
  size?: LhSpaceSizeInput
  /** Разрешить ли перенос строк (только для горизонтального направления) */
  wrap?: boolean
  /** Выравнивание */
  alignment?: LhSpaceAlignment
  /** Свойство sx для быстрой вёрстки */
  sx?: LhSxProps
}

LhSpaceSizeInput _{(из @lh-ui/share/core/space)}

/**
 * Нормализация отступа: предустановки отображаются на spacing-токены, числа воспринимаются как px
 */
export type LhSpaceSizeInput = 'small' | 'medium' | 'large' | number | [number, number]

LhSpaceAlignment _{(из @lh-ui/share/core/space)}

/** Выравнивание интервала */
export type LhSpaceAlignment = 'start' | 'center' | 'end' | 'baseline'