Div

Компонент с установленными отступами, которые отличаются в зависимости от платформы. Необходим, когда есть какой-то блок с информацией, у которого должны быть стандартные отступы, чтобы визуально выровнять его с другими элементами на странице.

Загружается...

В компоненты Header и SimpleCell уже заложены стандартные платформенные отступы, поэтому не требуется никакой дополнительной конфигурации, чтобы выравнять эти элементы. Но если вы просто добавляете на страницу текстовый элемент (или свой пользовательский компонент) и хотите добиться визуального выравнивания, то используйте компонент Div.

Загружается...

Если вы не хотите использовать дополнительную обёртку, то можно задать отступы с помощью CSS-переменных --vkui--size_base_padding_vertical--regular для верхнего и нижнего отступа и --vkui--size_base_padding_horizontal--regular для боковых отступов.

MyComponent.tsx
import styles from './MyComponent.module.css';
 
function MyComponent({ children }) {
  return <div className={styles.paddings}>{children}</div>;
}
MyComponent.module.css
.paddings {
  padding-top: var(--vkui--size_base_padding_vertical--regular);
  padding-bottom: var(--vkui--size_base_padding_vertical--regular);
  padding-left: var(--vkui--size_base_padding_horizontal--regular);
  padding-right: var(--vkui--size_base_padding_horizontal--regular);
}
СвойствоОписание
getRootRefRef<HTMLDivElement>
По умолчанию: -