UIKit
Gravity의 서비스 구축을 위한 기본 UI 컴포넌트 및 토큰.
UIKit · 
풍부한 웹 애플리케이션을 만들기 위한 유연하고 실용적이며 효율적인 React 컴포넌트 모음입니다.
설치
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 두 가지 언어로 제공됩니다.
언어를 설정하려면 configure 함수를 사용하세요.
// index.js
import {configure} from '@gravity-ui/uikit';
configure({
lang: 'ru',
});
개발
스토리북과 함께 개발 서버를 시작하려면 다음을 실행하세요.
git clone git@github.com:gravity-ui/uikit.git
cd uikit
npm ci
npm run start
