Für Entwickler:innen
Zuerst wird die Einbindung in ein Vite-Projekt mit React beschrieben. Demnächst folgen die Einbindungen in andere Technologien.
Vite + React
1. Installieren der KERN Abhängigkeiten
- NPM
- PNPM
- YARN
npm i @kern-ux/components @kern-ux/react @public-ui/components
pnpm i @kern-ux/components @kern-ux/react @public-ui/components
yarn add @kern-ux/components @kern-ux/react @public-ui/components
2. Integration in das Projekt
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import {EFA} from '@kern-ux/themes';
import { register } from '@public-ui/components';
import { defineCustomElements as Kolibri } from "@public-ui/components/dist/loader";
import { defineCustomElements as Kern } from "@kern-ux/components/dist/loader";
register([EFA], [Kern, Kolibri ],{
theme: {
name: 'efa'
}
})
.then(() => {
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
}).catch(console.warn);
3. Schriftarten und Module einbinden
Schriftarten müssen losgelöst von anderen Ressourcen eingebunden werden. Das bedeutet, dass sie nicht in das Stylesheet eingebunden werden dürfen, sondern als eigenständige Ressource geladen werden müssen.
Hierzu muss der Ordner von node_modules/@kern-ux/themes/assets/material-symbols
in das Projekt in den Ordner /public
kopiert und das Stylesheet eingebunden werden.
Außerdem muss das Kern-Modul eingebunden werden und das class
sowie data-theme
Attribut auf den Wert efa
im Body-Tag gesetzt werden.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/material-symbols/index.css" />
<title>Vite + React + TS</title>
<script type="module" src="/node_modules/@kern-ux/components/dist/kern/kern.esm.js"></script>
</head>
<body class="efa" data-theme="efa">
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
4. Komponenten verwenden
Für eine ausführliche Komponenten-Dokumentation öffne die "Komponenten"-Seite.
import React from 'react';
import { KernButton } from '@kern-ux/react';
export const AppComponent = () => {
return (
<div>
<KernButton _label="Primary" _variant="primary"></KernButton>
</div>
);
};