Модуль: 4. Разработка

Урок 2. Знакомство с VKUI

Главное в уроке

  • •

    VKUI — библиотека адаптивных React-компонентов, которая поможет вашему приложению органично вписаться в UI ВКонтакте.

  • •

    Структура приложения формируется следующими компонентами:

    TypeScript
    <SplitLayout> // Контейнер для создания многоколоночных экранов <SplitCol> // Отрисовка отдельных колонок <Epic> // Используется для организации экранов ... <View> // Базовый компонент для создания панелей <Panel>...</Panel> // Экраны приложения, <Panel>...</Panel> // из нескольких виден только один ... // ... </View> </Epic> </SplitCol> </SplitLayout>
  • •

    Кроме компонентов, упомянутых выше, в мини-приложениях также часто используются следующие:

    • •

      Tabbar — компонент для навигации внутри Epic. Представляет собой нижний блок навигации с табами. Внутри него располагаются TabbarItem — отдельные элементы навигации (кнопки).

    • •

      FixedLayout — компонент, который закрепляет вложенные в него компоненты вверху или внизу области видимости экрана. Идеально подходит для кнопок «Заказать» и «Поделиться».

  • •

    Для отображения информации о блюде мы сверстали свой React-компонент на основе компонентов, которые предоставляет VKUI. Полный код можно найти в исходных файлах по ссылке ниже.

Полезные ссылки

← Предыдущий урок

Следующий урок →