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 ミックスインファイルもあります。

I18N

一部のコンポーネントにはテキストトークン（単語やフレーズ）が含まれています。これらはen（デフォルト）とruの2つの言語で提供されます。言語を設定するには、configure関数を使用します。

// index.js

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

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

開発

Storybookで開発サーバーを起動するには、以下を実行します。

git clone git@github.com:gravity-ui/uikit.git
cd uikit
npm ci
npm run start

UIKit

§UIKit ·

§インストール

§使用方法

§スタイル

§I18N

§開発

UIKit ·

インストール

使用方法

スタイル

I18N

開発