UIKit ·

一套灵活、实用且高效的 React 组件，用于创建丰富的 Web 应用程序。

安装

npm install --save-dev @gravity-ui/uikit

使用

import {Button} from '@gravity-ui/uikit';

const SubmitButton = <Button view="action" size="l" />;

样式

UIKit 自带基础样式和主题。为了使一切看起来美观，请在入口文件的顶部包含以下内容：

// index.js

import '@gravity-ui/uikit/styles/fonts.css';
import '@gravity-ui/uikit/styles/styles.css';

// ...

UIKit 支持不同的主题：亮色、暗色及其对比度变体。您的应用必须在ThemeProvider内渲染：

import {createRoot} from 'react-dom/client';
import {ThemeProvider} from '@gravity-ui/uikit';

const root = createRoot(document.getElementById('root'));
root.render(
  <ThemeProvider theme="light">
    <App />
  </ThemeProvider>,
);

可以在 SSR 期间生成初始根 CSS 类，以避免主题闪烁：

import {getRootClassName} from '@gravity-ui/uikit/server';

const theme = 'dark';
const rootClassName = getRootClassName({theme});

const html = `
<html>
  <body>
    <div id="root" class="${rootClassName}"></div>
  </body>
</html>
`;

此外，还有一个 SCSS mixins文件，其中包含可在应用中使用的实用助手。

国际化

一些组件包含文本标记（单词和短语）。它们有两种语言：en（默认）和ru。要设置语言，请使用configure函数：

// index.js

import {configure} from '@gravity-ui/uikit';

configure({
  lang: 'ru',
});

开发

要使用 storybook 启动开发服务器，请运行以下命令：

npm start

UIKit

§UIKit ·

§安装

§使用

§样式

§国际化

§开发

UIKit ·

安装

使用

样式

国际化

开发