Div
Компонент с установленными отступами, которые отличаются в зависимости от платформы. Необходим, когда есть какой-то блок с информацией, у которого должны быть стандартные отступы, чтобы визуально выровнять его с другими элементами на странице.
Пример использования
В компоненты Header
и SimpleCell
уже заложены
стандартные платформенные отступы, поэтому не требуется никакой дополнительной конфигурации,
чтобы выравнять эти элементы. Но если вы просто добавляете на страницу текстовый элемент
(или свой пользовательский компонент) и хотите добиться визуального выравнивания, то
используйте компонент Div
.
Альтернатива
Если вы не хотите использовать дополнительную обёртку, то можно задать отступы с помощью
CSS
-переменных --vkui--size_base_padding_vertical--regular
для верхнего и нижнего отступа
и --vkui--size_base_padding_horizontal--regular
для боковых отступов.
import styles from './MyComponent.module.css';
function MyComponent({ children }) {
return <div className={styles.paddings}>{children}</div>;
}
.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);
}
Свойства и методы
Свойство | Описание |
---|---|
getRootRef | Ref<HTMLDivElement> По умолчанию: - |