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 joli, 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 racine 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>
`;

Il existe également 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

Licence

Distribué sous la licence MIT. Voir LICENSE pour les détails.

Pour les agents IA

La bibliothèque de composants React de base et de jetons de conception pour les applications Gravity UI — contrôles, entrées, superpositions, mise en page et thèmes sur lesquels tous les autres packages @gravity-ui s'appuient.

Quand l'utiliser

Interface utilisateur d'application standard : boutons, contrôles de formulaire, modales et popups, menus, onglets, étiquettes, typographie et primitives de mise en page.
La base thématique d'une application Gravity UI : ThemeProvider, jetons de conception et variables CSS que le reste de l'écosystème @gravity-ui/* s'attend à trouver.
Données tabulaires simples via le composant Table intégré (sélection, tri, actions sur les lignes).

Quand ne pas l'utiliser

Grilles de données riches en fonctionnalités (virtualisation, redimensionnement de colonnes, regroupement, réorganisation) — utilisez @gravity-ui/table, un package headless séparé. Ce n'est pas le même que le composant Table de uikit.
Graphiques et visualisation de données — utilisez @gravity-ui/charts (@gravity-ui/chartkit est l'ancien wrapper).
Coques de navigation d'application (en-tête latéral, pied de page, logo) — utilisez @gravity-ui/navigation.
Sélecteurs de date, calendriers et contrôles de plage — utilisez @gravity-ui/date-components.
L'ensemble d'icônes SVG lui-même — utilisez @gravity-ui/icons ; uikit ne fournit que le rendu Icon.

Pièges courants

La prop de style de Button est view, pas variant ou color.
Les composants s'affichent sans style sans configuration. Encapsulez l'application dans ThemeProvider et importez @gravity-ui/uikit/styles/styles.css (plus fonts.css) une seule fois au point d'entrée — les deux sont requis.
Icon n'a pas de prop name. Passez un composant d'icône importé via data : import {Gear} from '@gravity-ui/icons'; <Icon data={Gear} size={16} />.
Les valeurs de theme sont light | dark | light-hc | dark-hc. Il n'y a pas de theme="default".

UIKit

§UIKit ·

§Installation

§Utilisation

§Styles

§I18N

§Développement

§Licence

§Pour les agents IA

§Quand l'utiliser

§Quand ne pas l'utiliser

§Pièges courants

§Documentation utile