Skip to content
/ VKUI Public

VKUI – это набор React-компонентов, с помощью которых можно создавать интерфейсы, внешне неотличимые от наших iOS и Android приложений.

License

Notifications You must be signed in to change notification settings

VKCOM/VKUI

Folders and files

NameName
Last commit message
Last commit date

Latest commit

fad7e93 · Oct 24, 2024
Sep 8, 2023
Sep 11, 2024
Jul 29, 2024
Apr 8, 2024
Sep 11, 2024
Jul 18, 2024
Oct 24, 2024
Jul 16, 2024
Aug 29, 2024
Aug 22, 2024
Oct 24, 2023
Apr 13, 2020
Jul 16, 2024
Sep 11, 2024
Aug 22, 2024
Sep 8, 2023
Apr 8, 2024
Sep 1, 2020
May 2, 2024
Apr 8, 2024
Apr 17, 2023
Jul 11, 2024
Dec 27, 2017
Jan 16, 2024
Sep 9, 2024
Aug 12, 2024
Aug 3, 2023
Sep 11, 2024
Jul 16, 2024
Jul 29, 2024
Sep 11, 2024

Repository files navigation

license mit open latest version

VKUI — это библиотека адаптивных React-компонентов
для создания веб-приложений.
Библиотека основана на дизайн-системе VK и реализует её интерфейсы для различных платформ.
Релизы: https://github.com/VKCOM/VKUI/releases.
Гайд по миграции на версию 6.

Установка

npm:

npm i @vkontakte/vkui

yarn:

yarn add @vkontakte/vkui

pnpm:

pnpm add @vkontakte/vkui

Обратите внимание: мы поддерживаем react и react-dom версии ^18.2.0

Hello World

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import {
  AdaptivityProvider,
  ConfigProvider,
  AppRoot,
  SplitLayout,
  SplitCol,
  View,
  Panel,
  PanelHeader,
  Header,
  Group,
  SimpleCell,
} from '@vkontakte/vkui';
import '@vkontakte/vkui/dist/vkui.css';

const Example = () => {
  const platform = usePlatform();

  return (
    <AppRoot>
      <SplitLayout header={platform !== 'vkcom' && <PanelHeader delimiter="none" />}>
        <SplitCol autoSpaced>
          <View activePanel="main">
            <Panel id="main">
              <PanelHeader>VKUI</PanelHeader>
              <Group header={<Header mode="secondary">Items</Header>}>
                <SimpleCell>Hello</SimpleCell>
                <SimpleCell>World</SimpleCell>
              </Group>
            </Panel>
          </View>
        </SplitCol>
      </SplitLayout>
    </AppRoot>
  );
};

const container = document.getElementById('root');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(
  <ConfigProvider>
    <AdaptivityProvider>
      <Example />
    </AdaptivityProvider>
  </ConfigProvider>,
);

Браузеры

С подробным списком можно ознакомиться в файле .browserslistrc

Тестирование

Мы работаем над качеством библиотеки и подвозим тесты. yarn test запускает юниты, типы и линтит. Также мы поддерживаем скриншотные тесты (e2e) и проверяем базовую доступность (a11y) компонентов — смотрите наш гайд по тестированию.

Документация

В документации вы сможете найти информацию об использовании компонентов и утилит.

Сообщить о проблеме

Напишите нам issue, если нашли баг или у вас есть предложения по улучшению библиотеки. Если вы хотите задать вопрос или обсудить библиотеку, воспользуйтесь дискуссиями.

Contributing

Мы очень радуемся, когда пользователи библиотеки работают над её улучшением. Для того, чтобы оставить след в истории:

  1. Для начала ознакомьтесь с нашим манифестом 📝
  2. Затем посмотрите требования к разработке 🔧
  3. А теперь смело вносите изменения и создавайте pull request ❤️

About

VKUI – это набор React-компонентов, с помощью которых можно создавать интерфейсы, внешне неотличимые от наших iOS и Android приложений.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published