UIKit
UIKit & middot; [
(https://www.npmjs.com/package/@gravity-ui/uikit) [
(https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [
(https://preview.gravity-ui.com/uikit/)
Un conjunto de componentes de React flexibles, altamente prácticos y eficientes para crear aplicaciones web sofisticadas.
Instalar
npm install --save-dev @gravity-ui/uikit
Uso
import {Button} from '@gravity-ui/uikit';
const SubmitButton = <Button view="action" size="l" />;
Estilos
UIKit viene con un estilo y un tema básicos. Para que todo se vea bien, incluye esto en la parte superior de tu archivo de entrada:
// index.js
import '@gravity-ui/uikit/styles/fonts.css';
import '@gravity-ui/uikit/styles/styles.css';
// ...
UIKit admite diferentes temas: claros, oscuros y sus variantes de contraste. Tu aplicación debe renderizarse dentro 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>,
);
Es posible generar clases CSS raíz iniciales durante SSR para evitar que el tema parpadee:
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>
`;
Además, hay un archivo de mezclas SCSS con útiles ayudantes para usar en tu aplicación.
I18N
Algunos componentes contienen símbolos de texto (palabras y frases). Están disponibles en dos idiomas: en (predeterminado) y ru.
Para configurar la configure función de uso del idioma:
// index.js
import {configure} from '@gravity-ui/uikit';
configure({
lang: 'ru',
});
Desarrollo
Para iniciar el servidor de desarrollo con Storybook, ejecute lo siguiente:
npm start
