Installation
Du kannst Placer Toolkit über das CDN laden oder lokal installieren. Wir haben viele Optionen, Placer Toolkit zu installieren, abhängig von deinem Setup.
CDN-Installation#
Der experimentelle Auto‐Loader ist die einfachste und effizienteste Möglichkeit, Placer Toolkit zu verwenden. Ein leichtgewichtiges Skript beobachtet das DOM nach nicht registrierten Placer Toolkit‐Elementen und lädt sie bei Bedarf nach – selbst wenn sie dynamisch hinzugefügt werden.
Auch wenn es praktisch ist, kann Autoloading zu einem „Flash of Undefined Custom Elements“ (FOUCE) führen. Füge der Wurzel‐HTML‐Element den pc-cloak‐Klassennamen hinzu, um den FOUCE‐Patch global anzuwenden.
<link rel="stylesheet" href="https://fonts.bunny.net/css?family=jetbrains-mono:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i|nunito:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|playfair-display:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/styles/placer.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/placer-autoloader.js"></script>Der Standard‐Loader registriert alle Webkomponenten von Placer Toolkit direkt beim Laden. Wenn du jedoch nur eine Handvoll Komponenten nutzt, ist der Auto‐Loader deutlich effizienter. Alternativ kannst du auch Komponenten einzeln importieren, wenn du sie nur im Voraus laden willst. Denk daran, pc-cloak zum Wurzel‐HTML‐Element hinzuzufügen, um den FOUCE‐Patch global anzuwenden.
<link rel="stylesheet" href="https://fonts.bunny.net/css?family=jetbrains-mono:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i|nunito:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|playfair-display:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/styles/placer.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/placer.js"></script>Jetzt kannst du Placer Toolkit verwenden!
Verwendung von Font Awesome Kit‐Codes#
Nutzer:innen von Font Awesome Pro und Pro+ können ihren Kit‐Code setzen, um den Premium‐Icon‐Set freizuschalten. Du kannst ihn bereitstellen, indem du das data-fa-kit-code‐Attribut zu einem beliebigen Element auf der Seite hinzufügst oder indem du die Funktion setKitCode() aufrufst.
<!-- Option 1: data-fa-kit-code Attribut -->
<script
type="module"
src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/placer-autoloader.js"
data-fa-kit-code="42deadbeef"
></script>
<!-- Option 2: setKitCode() Funktion -->
<script type="module">
import { setKitCode } from "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/utilities/kit-code.js";
setKitCode("42deadbeef");
</script>Font Awesome Free‐Icons werden über jsDelivr geladen, das DSGVO‐konform ist. Font Awesome Pro‐ und Pro+‐Icons werden jedoch vom Kit‐CDN von Font Awesome geladen, das die IP‐Adresse des/der Nutzer:in an die Server von Font Awesome übermittelt, um Seitenaufrufe zu zählen. IP‐Adressen gelten als personenbezogene Daten nach DSGVO.
Wenn du FA Pro/Pro+ nutzt, bist du verantwortlich für:
- Die Offenlegung dessen in der Datenschutzerklärung deiner Website
- Die Sicherstellung der DSGVO‐ und Datenschutz‐Compliance
- Einen gültigen Rechtsgrund für diese Datenverarbeitung
Siehe die Placer Toolkit‐Datenschutzerklärung für weitere Informationen.
Erweiterte Installation#
Der Auto‐Loader ist der einfachste Weg, Placer Toolkit zu nutzen, aber unterschiedliche Projekte (oder persönliche Vorlieben) können andere Installationsmethoden erfordern.
Komponenten‐Cherry‐Picking über das CDN#
Cherry Picking lädt nur die benötigten Komponenten direkt beim Aufruf der Seite, während die Anzahl der zu ladenden Dateien minimiert wird. Der Nachteil ist, dass du jede einzelne Komponente auf jeder Seite importieren musst, auf der sie genutzt wird. Zusätzlich musst du placer.css oder andere CSS‐Dateien einbinden, um importierte Komponenten zu stylen.
Hier ist ein Beispiel, das nur die Button‐Komponente lädt:
<link rel="stylesheet" href="https://fonts.bunny.net/css?family=jetbrains-mono:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i|nunito:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|playfair-display:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/styles/placer.css" />
<script type="module">
import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/button/button.js";
// <pc-button> ist registriert und einsatzbereit!
</script>Du kannst den Code aus dem Abschnitt Importieren der Dokumentation der jeweiligen Komponente kopieren. Manche Komponenten haben Abhängigkeiten, die automatisch mitgeladen werden. Diese sind im Abschnitt Abhängigkeiten der jeweiligen Dokumentation aufgelistet.
Du findest Dateien wie chunk.[hash].js im chunks‐Verzeichnis. Importiere diese Dateien niemals direkt, da sie automatisch generiert werden und sich zwischen Versionen ändern.
npm‐Installation#
Wenn du das CDN nicht nutzen willst oder kannst, kannst du Placer Toolkit über npm installieren – entweder aus dem npm‐Registry oder über die bereitgestellte Tarball‐Datei.
Wenn du die npm‐Registry nutzen willst, kannst du dieses Befehl verwenden:
npm install placer-toolkityarn add placer-toolkitpnpm add placer-toolkitDies installiert die neueste Version in deinem Projekt.
Danach importierst du die benötigten Komponenten:
// Standardschriften importieren
import "https://fonts.bunny.net/css?family=jetbrains-mono:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i|nunito:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|playfair-display:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap";
// Option 1: Alle Placer Toolkit‐Styles importieren
import "placer-toolkit/dist/styles/placer.css";
// Option 2: Nur das Standard‐Design importieren
import "placer-toolkit/dist/styles/themes/default.css";
// Option 1: Alle Komponenten importieren (kann Ladezeiten erhöhen)
import "placer-toolkit";
// Option 2: Nur benötigte Komponenten importieren
// <pc-button> importieren
import "placer-toolkit/dist/components/button/button.js";
// <pc-input> importieren
import "placer-toolkit/dist/components/input/input.js";Wenn du die Tarball‐Datei nutzen willst, lade sie zuerst in das Projekt‐Root herunter:
Dann installierst du sie mit diesem Befehl:
npm install placer-toolkit-1.0.0-alpha.3.tgzyarn add placer-toolkit-1.0.0-alpha.3.tgzpnpm add placer-toolkit-1.0.0-alpha.3.tgzDanach importierst du die benötigten Komponenten:
// Standardschriften importieren
import "https://fonts.bunny.net/css?family=jetbrains-mono:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i|nunito:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|playfair-display:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap";
// Option 1: Alle Placer Toolkit‐Styles importieren
import "placer-toolkit/dist/styles/placer.css";
// Option 2: Nur das Standard‐Design importieren
import "placer-toolkit/dist/styles/themes/default.css";
// Option 1: Alle Komponenten importieren
import "placer-toolkit";
// Option 2: Nur benötigte Komponenten importieren
import "placer-toolkit/dist/components/button/button.js";
import "placer-toolkit/dist/components/input/input.js";Unterschied zwischen cdn und dist#
Dir wird auffallen, dass CDN‐Links mit /cdn/ beginnen und npm‐Imports mit /dist/. Die /cdn/‐Dateien sind separat gebündelt, während /dist/‐Dateien nicht vorgebündelt sind, sodass dein Bundler effizienter Deduplizieren und kleinere Bundles erzeugen kann.
Kurzfassung:
/cdn/ist für CDN‐Nutzer:innen/dist/ist für npm‐Nutzer:innen
Diese Änderung wurde in 1.0.0-alpha.1 eingeführt, um Fehler mit tslib in Version 0.5.1 zu beheben.