SplitLayout

Контейнер для реализации интерфейса многоколоночной структурой – за реализацию колонки отвечает SplitCol.

Помимо многоколоночной структуры, за счёт SplitCol со свойством autoSpaced, обеспечивает боковые отступы для экранов на базе Panel.

Связанные страницы и компоненты:

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

Применение компонента

Достаточно будет объявить SplitLayout один раз ближе к корню приложения (см. Навигация | Предварительная настройка).

Выравнивание

За выравнивание контента по горизонтали отвечает свойство center.

true — весь контент выравнивается по центру;
false — выравнивание не применяется.

Сквозная шапка

Для реализации сквозной шапки между колонками используется свойство header с передачей в него компонента PanelHeader.

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

Для платформы vkcom шапку передавать не нужно. Для определения платформы используйте хук usePlatform.

src/App.tsx

import { SplitLayout, SplitCol, usePlatform } from '@vkontakte/vkui';
 
export default function App() {
  const platform = usePlatform();
  const hasHeader = platform !== 'vkcom';
 
  return (
    <SplitLayout header={hasHeader && <PanelHeader delimiter="none" />}>
      {/* остальной контент */}
    </SplitLayout>
  );
}

SplitCol

Подкомпонент для отрисовки колонки в многоколоночном интерфейсе.

Свойство fixed даёт возможность задать стиль position: fixed для колонки. Обычно используется для боковых колонок, не позволяя им прокручиваться с основным контентом и всегда оставаться в области видимости.

true — стиль применяется;
false — стиль не применяется.

Размеры

С помощью свойств width, minWidth и maxWidth можно управлять шириной колонки. Принимаются либо числовое (в пикселях), либо строковое (токены или другие единицы измерения) значения.

<SplitCol width="100%" maxWidth={560}>
  {/* контент */}
</SplitCol>

Свойство stretchedOnMobile позволит колонке растягиваться на всю доступную ширину на устройствах шириной меньше tablet.

Свойство	Описание
`center`	`boolean` Центрирует контент. По умолчанию: `-`
`getRef`	`Ref<HTMLDivElement>` Deprecated: Since 7.9.0. Вместо этого используйте `slotProps={ content: { getRootRef: ... } }`. По умолчанию: `-`
`getRootRef`	`Ref<HTMLDivElement>` По умолчанию: `-`
`header`	`ReactNode` Компонент для отрисовки заголовка. По умолчанию: `-`
`modal`	`ReactNode` Deprecated: Будет удалeно в VKUI v8. Начиная с VKUI v7 `ModalRoot` можно располагать в любом месте приложения в пределах `AppRoot`. По умолчанию: `-`
`popout`	`ReactNode` Deprecated: Будет удалeно в VKUI v8. Начиная с VKUI v7 компоненты можно располагать в любом месте приложения в пределах `AppRoot`. По умолчанию: `-`
`slotProps`	`{ root?: (HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute); content?: (HTMLAttributes<...> & ... 1 more ... & HasDataAttribute) \| undefined; } \| undefined` Свойства, которые можно прокинуть внутрь компонента: `root`: свойства для прокидывания в корень компонента; `content`: свойства для прокидывания в контент;. По умолчанию: `-`

SplitCol

Свойство	Описание
`animate`	`boolean` Если false, то переходы между Panel происходят без анимации. По умолчанию: `-`
`autoSpaced`	`boolean` Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`. По умолчанию: `-`
`fixed`	`boolean` Фиксированное положение колонки. По умолчанию: `-`
`getRootRef`	`Ref<HTMLDivElement>` По умолчанию: `-`
`maxWidth`	`string \| number` Максимальная ширина колонки. По умолчанию: `-`
`minWidth`	`string \| number` Минимальная ширина колонки. По умолчанию: `-`
`stretchedOnMobile`	`boolean` Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`. По умолчанию: `-`
`width`	`string \| number` Ширина колонки. По умолчанию: `-`

Spacing

Checkbox

SplitLayout

Применение компонента

Выравнивание

Сквозная шапка

SplitCol

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

Размеры

Отступы

Анимации

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

SplitLayout

SplitCol