Интервал

Контейнер-раскладка, добавляющий интервал между соседними элементами. Поддерживает горизонтальное / вертикальное направление, предустановленные и пользовательские интервалы, перенос и выравнивание.

Интервал

<template>
  <div class="demo-col">
    <p class="demo-note">Горизонтальное направление + предустановленный интервал</p>
    <LhSpace>
      <LhButton>Тушь</LhButton>
      <LhButton>Цветы и птицы</LhButton>
      <LhButton>Фигуры</LhButton>
    </LhSpace>
    <p class="demo-note">Вертикальное направление</p>
    <LhSpace direction="vertical">
      <LhButton>Тушь</LhButton>
      <LhButton>Цветы и птицы</LhButton>
    </LhSpace>
    <p class="demo-note">Пользовательский интервал + перенос</p>
    <LhSpace :size="24" wrap>
      <LhTag v-for="item in items" :key="item">{{ item }}</LhTag>
    </LhSpace>
    <p class="demo-note">Выравнивание alignment=start</p>
    <LhSpace alignment="start">
      <LhButton>Короткая</LhButton>
      <div style="height: 48px; padding: 12px; border: 1px dashed var(--lh-border-color)">Высокий блок</div>
    </LhSpace>
  </div>
</template>

<script>
export default {
  data: () => ({ items: ['Тушь', 'Цветы и птицы', 'Фигуры', 'Гунби', 'Се-и', 'Могу'] }),
}
</script>

Props

Проп	Описание	Тип	По умолчанию
direction	Направление расположения	'horizontal' \| 'vertical'	'horizontal'
size	Интервал: предустановленные значения / число пикселей / [горизонталь, вертикаль]	'small' \| 'medium' \| 'large' \| number \| [number, number]	'medium'
wrap	Разрешить перенос (только горизонтальное направление)	boolean	false
alignment	Выравнивание по поперечной оси	'start' \| 'center' \| 'end' \| 'baseline'	'center'
sx	Компактная раскладка через sx	—	—