Space компонент

Компонент Space в Naive UI используется для управления расстояниями между элементами интерфейса, обеспечивая гибкое и удобное расположение компонентов в горизонтальном или вертикальном направлении. Он является фундаментальным инструментом для построения аккуратных и согласованных макетов, особенно когда требуется равномерное распределение элементов без использования CSS margin или padding вручную.

Основные свойства компонента Space

  1. direction Определяет направление расположения элементов внутри Space. Возможные значения:

    • "horizontal" — элементы располагаются в ряд по горизонтали (значение по умолчанию).
    • "vertical" — элементы располагаются столбцом по вертикали.
    <n-space direction="vertical">
  <n-button>Кнопка 1</n-button>
  <n-button>Кнопка 2</n-button>
</n-space>

  2. size Управляет расстоянием между дочерними элементами. Можно задать числовое значение в пикселях или выбрать одно из предопределённых значений: "small", "medium", "large".

    <n-space size="large">
  <n-tag>Тег 1</n-tag>
  <n-tag>Тег 2</n-tag>
</n-space>

    Примечание: числовые значения позволяют точечно контролировать интервалы, что полезно при адаптивной верстке.

  3. align Определяет выравнивание элементов вдоль главной оси (для горизонтального направления) или поперечной оси (для вертикального). Возможные значения:

    • "start" — выравнивание по началу контейнера.
    • "center" — центрирование элементов.
    • "end" — выравнивание по концу контейнера.
    • "stretch" — растягивание элементов на всю доступную ширину или высоту.
    <n-space align="center">
  <n-button>Центр 1</n-button>
  <n-button>Центр 2</n-button>
</n-space>

  4. justify Управляет распределением пространства между элементами по главной оси. Возможные значения:

    • "start" — элементы сгруппированы у начала.
    • "end" — элементы сгруппированы у конца.
    • "center" — элементы по центру.
    • "space-around" — равное пространство вокруг элементов.
    • "space-between" — элементы распределены с равными промежутками между ними.
    • "space-evenly" — элементы распределены с равными промежутками по всей длине.
    <n-space justify="space-between">
  <n-button>Левая</n-button>
  <n-button>Правая</n-button>
</n-space>

Вложенные Space

Компонент Space можно вкладывать друг в друга для создания сложных макетов. Например, горизонтальная группа кнопок внутри вертикального блока:

<n-space direction="vertical" size="large">
  <n-space>
    <n-button>Кнопка A</n-button>
    <n-button>Кнопка B</n-button>
  </n-space>
  <n-space>
    <n-button>Кнопка C</n-button>
    <n-button>Кнопка D</n-button>
  </n-space>
</n-space>

Такое вложение позволяет комбинировать разные направления и интервалы, сохраняя читаемость кода и согласованность дизайна.

Использование с динамическими списками

Компонент Space отлично интегрируется с циклическим рендерингом элементов, например через v-for в Vue.js:

<n-space size="medium" direction="vertical">
  <n-tag v-for="tag in tags" :key="tag">{{ tag }}</n-tag>
</n-space>

Это особенно полезно для отображения тегов, меток, карточек и других повторяющихся элементов, автоматически обеспечивая корректные интервалы.

Space как обёртка для формы или группы элементов

Space можно использовать для выравнивания полей формы или кнопок действий, обеспечивая аккуратный отступ без дополнительного CSS:

<n-space direction="vertical" size="large">
  <n-input placeholder="Имя пользователя" />
  <n-input placeholder="Пароль" type="password" />
  <n-space justify="end">
    <n-button>Отмена</n-button>
    <n-button type="primary">Войти</n-button>
  </n-space>
</n-space>

Здесь горизонтальный Space внутри вертикального блока позволяет разместить кнопки справа, сохраняя общий вертикальный интервал между полями.

Расширенные возможности

  • Респонсивность: Space может адаптироваться к ширине родительского контейнера, корректируя распределение элементов через свойства align и justify.
  • Комбинация с Flex-контейнерами: Под капотом Space использует Flexbox, поэтому все стандартные свойства Flexbox (wrap, flex-grow, flex-shrink) совместимы и могут использоваться для более тонкой настройки.
  • Кастомизация через CSS: Несмотря на встроенные интервалы, можно добавлять кастомные классы к Space для дополнительного контроля отступов, фоновых цветов и границ.

Рекомендации по использованию

  • Для единообразного интерфейса лучше использовать предопределённые размеры size вместо числовых значений, чтобы обеспечить консистентность.
  • Горизонтальный Space подходит для кнопок, тегов и иконок, вертикальный — для форм, карточек и текстовых блоков.
  • Вложенные Space удобны для комплексных интерфейсов, но следует контролировать глубину вложенности, чтобы код оставался читаемым.

Компонент Space является ключевым инструментом для построения аккуратных интерфейсов в Naive UI, позволяя легко управлять расстояниями, выравниванием и распределением элементов без лишнего CSS и сложности.

Оглавление