Использование
После шагов из Установки у вас должно запускаться минимально работающее приложение. Здесь разберём простой пример использования и рекомендации по дальнейшим шагам.
Примеры продолжим на шаблоне React + TypeScript + Vite ↗.
Быстрый старт
Начнём с компонента Button:
src/App.tsx
import { Button } from '@vkontakte/vkui';
export default function App() {
return (
<Button mode="outline" size="l">
Привет, мир!
</Button>
);
}На странице должно появиться что-то похожее:
Навигационные слои
Приложение состоит из набора экранов с информацией. В VKUI есть специальные компоненты для экранов и навигации между ними. Подробно — в разделе Навигация. Ниже — базовый пример.
Многоколоночный интерфейс
На мобильных элементы приходится ограничивать, на настольных — можно размещать больше, разделяя интерфейс на колонки. Для этого есть SplitLayout с подкомпонентом SplitCol. Подробнее — на странице Навигация.
Адаптивный пример работы SplitLayout: