Zum Hauptinhalt springen
Version: 2.1.1

Einbinden von KERN

Die Komponenten sind bislang nur mit HTML und CSS umgesetzt, um die Gestaltung konsistent und einfach nutzbar zu machen.

Schritt 1: Installieren der KERN-UX Bibliothek​

Es gibt drei Möglichkeiten, das KERN-UX Native Package in deiner Anwendung zu verwenden:

Methode 1: Einbindung über NPM​

KERN-UX Native Package installieren​

Führe folgenden Befehl aus, um die KERN-UX Dateien zu installieren:

npm install @kern-ux/native --save

Binde die Styles in deine Applikation ein.

@import "@kern-ux/native/dist/kern.min.css";
@import "@kern-ux/native/dist/fonts/fira-sans.css";

Methode 2: Einbindung per CDN​

Füge diesen Code in die index.html deiner Anwendung ein, um die KERN-UX-Bibliothek zu laden per CDN zu laden:

jsdelivr​

<head>
  <!-- // ... -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kern-ux/native/dist/kern.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kern-ux/native/dist/fonts/fira-sans.css">
  <!-- // ... -->
</head>

unpkg​

<head>
  <!-- // ... -->
  <link rel="stylesheet" href="https://unpkg.com/@kern-ux/native/dist/kern.min.css">
  <link rel="stylesheet" href="https://unpkg.com/@kern-ux/native/dist/fonts/fira-sans.css">
  <!-- // ... -->
</head>

Methode 3: Kopieren der Bibliothek​

Du kannst die KERN-UX-Bibliothek auch direkt als ZIP-Datei herunterladen. Gehe dazu auf die Release-Seite des KERN-UX Repositories und lade die neueste Version der Bibliothek herunter.

Entpacke die ZIP-Datei und finde die SCSS-Dateien im Ordner src/scss. Diese kannst du in dein Projekt integrieren und nach Belieben anpassen. Achte darauf, die SCSS-Dateien zu kompilieren, um die benötigten CSS-Dateien zu generieren, die du anschließend in deine Anwendung einbinden kannst.

Schritt 2: Komponente einbinden​

Füge das HTML für eine Komponente in deine Anwendung ein. Gehe zur Beispiel-Alert-Komponente und kopiere das HTML.

Füge das HTML in eine Seite oder Vorlage in deiner Anwendung ein.

Inhaltsverzeichnis