Box

Когда использовать

Компонент Box рекомендуется использовать в следующих ситуациях:

• Создание контейнеров с отступами: когда нужно добавить внутренние отступы к любому элементу интерфейса;
• Управление размерами: для явного задания ширины, высоты или их ограничений;
• Абсолютное и относительное позиционирование: при создании наложений, выпадающих меню или сложных макетов;
• Flex-элементы: как потомок flex-контейнера.

Свойства раскладки

Компонент Box поддерживает обширный набор свойств, объединенных в логические категории:

Отступы

Свойства отступов (свойства с префиксом padding*) позволяют управлять пространством вокруг содержимого. Они принимают:

• токены дизайн-системы VKUI ('2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl');
• стандартные CSS-значения ('inherit', 'initial', 'unset');
• числовые значения (будут преобразованы в пиксели);
• любое валидное строковое значение ("2rem", "10%", CSS-переменные).

Размеры

Свойства размеров (свойства с постфиксом *Size) позволяют управлять шириной и высотой компонента, включая минимальные и максимальные ограничения. Они принимают:

• стандартные CSS-значения ('auto', 'max-content', 'min-content', 'fit-content', 'inherit', 'initial', 'unset');
• числовые значения в пикселях;
• любое валидное строковое значение ("200px", "50%", CSS-переменные).

Позиционирование

Свойства позиционирования позволяют определять схему позиционирования и смещения для компонента Box, обеспечивая статическое, относительное, абсолютное или фиксированное позиционирование с направленными смещениями.

Свойство position принимает значения 'static', 'relative', 'absolute', 'fixed'.

Свойства с префиксом inset* принимают:

• токены дизайн-системы VKUI ('2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl');
• стандартные CSS-значения ('auto', 'inherit', 'initial', 'unset');
• числовые значения (будут преобразованы в пиксели);
• любое валидное строковое значение ("2rem", "10%", CSS-переменные).

Flex-свойства

Flex-свойства (flexGrow, flexShrink и flexBasis) позволяют управлять поведением компонента внутри flex-контейнера.

Данные свойства принимают стандартные CSS-значения ('inherit', 'initial', 'unset').

Свойства flexGrow и flexShrink также принимают числовые значения.

flexBasis дополнительно принимает:

• 'auto', 'max-content', 'min-content', 'fit-content', 'content';
• числовые значения (будут преобразованы в пиксели);
• любое валидное строковое значение ("2rem", "10%", CSS-переменные).

Переполнение

Свойства переполнения (с префиксом overflow*) позволяют управлять отображением содержимого, которое выходит за границы компонента Они принимают стандартные CSS-значения переполнения, такие как 'visible', 'hidden', 'clip', 'scroll', 'auto', 'inherit', 'initial', 'unset'.

<Box
  style={{
    border: '1px solid var(--vkui--color_separator_primary)',
    padding: '16px',
    margin: '16px 0',
    borderRadius: '8px',
    backgroundColor: 'var(--vkui--color_background_secondary)',
  }}
>
  <strong>📏 Единицы измерения:</strong> Все свойства принимают значения дизайн-системы VKUI
  (`'2xs'`, `'xs'`, `'s'`, `'m'`, `'l'`, `'xl'`, `'2xl'`, `'3xl'`, `'4xl'`), CSS-значения (`'auto'`,
  `'inherit'`, `'initial'`, `'unset'`) или числовые значения в пикселях.
</Box>

Сравнение с другими компонентами

Box vs Flex

• Box — универсальный контейнер с настраиваемыми отступами, подходит для создания изолированных блоков, может быть потомком компонента Flex;
• Flex — специализированный контейнер для создания flex-блоков, поддерживает все flex-свойства.

Box vs div

• Box — предоставляет декларативный API на базе дизайн-токенов VKUI;
• div — требует ручного управления стилями и классами (через свойства style/class).

<Box padding="m" inlineSize={300} position="relative">
  Контент
</Box>
 
<div style={{ padding: 'var(--vkui--spacing_m)', width: 300, position: 'relative' }}>Контент</div>

Box vs Spacing

• Box — для создания контейнеров с любыми layout-свойствами;
• Spacing — исключительно для создания отступов между элементами.

Свойства и методы