UIKit ·

Un ensemble de composants React flexibles, très pratiques et efficaces pour créer des applications web riches.

Installation

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

Utilisation

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

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

Styles

UIKit est livré avec des styles de base et un thème. Pour que tout soit esthétique, incluez ceci en haut de votre fichier d'entrée :

// index.js

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

// ...

UIKit prend en charge différents thèmes : clair, sombre et leurs variantes contrastées. Votre application doit être rendue à l'intérieur de 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>,
);

Il est possible de générer des classes CSS racines initiales lors du SSR pour éviter le scintillement du thème :

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

De plus, il existe un fichier SCSS de mixins avec des helpers utiles à utiliser dans votre application.

I18N

Certains composants contiennent des jetons textuels (mots et phrases). Ils sont disponibles en deux langues : en (par défaut) et ru. Pour définir la langue, utilisez la fonction configure :

// index.js

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

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

Développement

Pour démarrer le serveur de développement avec storybook, exécutez la commande suivante :

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

UIKit

§UIKit ·

§Installation

§Utilisation

§Styles