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 wird mit Basis-Styling und einem Theme geliefert. 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 kontrastreiche Varianten. 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-Flackern 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 mit 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

Lizenz

Verteilt unter der MIT-Lizenz. Details finden Sie in LICENSE.

Für KI-Agenten

Die Basis-React-Komponenten und die Design-Token-Bibliothek für Gravity UI-Apps – Steuerelemente, Eingaben, Overlays, Layout und Theming, auf denen jedes andere @gravity-ui-Paket aufbaut.

Wann zu verwenden

Standard-UI für Anwendungen: Schaltflächen, Formularsteuerelemente, Modale und Popups, Menüs, Tabs, Labels, Typografie und Layout-Primitive.
Die Theming-Grundlage einer Gravity UI-App: ThemeProvider, Design-Tokens und CSS-Variablen, die der Rest des @gravity-ui/*-Ökosystems erwartet.
Einfache tabellarische Daten über die integrierte Table-Komponente (Auswahl, Sortierung, Zeilenaktionen).

Wann nicht zu verwenden

Umfangreiche Daten-Tabellen (Virtualisierung, Spaltenanpassung, Gruppierung, Neuanordnung) – verwenden Sie @gravity-ui/table, ein separates Headless-Paket. Es ist nicht dasselbe wie die Table-Komponente von uikit.
Diagramme und Datenvisualisierung – verwenden Sie @gravity-ui/charts (@gravity-ui/chartkit ist der Legacy-Wrapper).
Anwendungsnavigations-Shells (Seitenleiste, Header, Footer, Logo) – verwenden Sie @gravity-ui/navigation.
Datumsauswahl, Kalender und Bereichssteuerelemente – verwenden Sie @gravity-ui/date-components.
Der SVG-Icon-Satz selbst – verwenden Sie @gravity-ui/icons; uikit liefert nur den Icon-Renderer.

Häufige Fallstricke

Der Styling-Prop für Button ist view, nicht variant oder color.
Komponenten werden ohne Einrichtung ungestylt gerendert. Umschließen Sie die App mit ThemeProvider und importieren Sie @gravity-ui/uikit/styles/styles.css (plus fonts.css) einmal am Einstiegspunkt – beides ist erforderlich.
Icon hat keinen name-Prop. Übergeben Sie eine importierte Icon-Komponente über data: import {Gear} from '@gravity-ui/icons'; <Icon data={Gear} size={16} />.
theme-Werte sind light | dark | light-hc | dark-hc. Es gibt kein theme="default".

UIKit

§UIKit ·

§Installation

§Verwendung

§Styles

§I18N

§Entwicklung

§Lizenz

§Für KI-Agenten

§Wann zu verwenden

§Wann nicht zu verwenden

§Häufige Fallstricke

§Nützliche Dokumentation