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.