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