UIKit ·

Eine Sammlung flexibler, äußerst praktischer und effizienter React-Komponenten zur Erstellung reichhaltiger Webanwendungen.

Installation

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

Verwendung

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

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

Styles

UIKit kommt mit Basis-Styling und einem Theme. Damit alles gut aussieht, fügen Sie dies am Anfang Ihrer Einstiegsdatei hinzu:

// index.js

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

// ...

UIKit unterstützt verschiedene Themes: hell, dunkel und deren Kontrastvarianten. Ihre App muss innerhalb von ThemeProvider gerendert werden:

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>,
);

Es ist möglich, beim SSR anfängliche Root-CSS-Klassen zu generieren, um Theme-Flimmern zu vermeiden:

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>
`;

Außerdem gibt es eine SCSS-Datei mit Mixins und nützlichen Helfern für Ihre App.

I18N

Einige Komponenten enthalten Text-Tokens (Wörter und Phrasen). Diese sind in zwei Sprachen verfügbar: en (Standard) und ru. Um die Sprache festzulegen, verwenden Sie die Funktion configure:

// index.js

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

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

Entwicklung

Um den Entwicklungsserver mit Storybook zu starten, führen Sie Folgendes aus:

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

UIKit

§UIKit ·

§Installation

§Verwendung

§Styles