Zum Hauptinhalt springen

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 i @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 "adopted-style-sheets";
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>
	);
};

Inhaltsverzeichnis