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.
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.6/cdn/styles/placer.css" /><script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.6/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.6/cdn/styles/placer.css" /><script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.6/cdn/placer.js"></script>Jetzt kannst du Placer Toolkit verwenden!
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.6/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.6/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
Sieh dir die Placer Toolkit‐Datenschutzerklärung für weitere Informationen.
Der Auto‐Loader ist der einfachste Weg, Placer Toolkit zu nutzen, aber unterschiedliche Projekte (oder persönliche Vorlieben) können andere Installationsmethoden erfordern.
Beim Cherry‐Picking lädst du nur die Komponenten, die du für die jeweilige Seite wirklich benötigst. Das minimiert die Dateigröße und optimiert die Ladezeit. 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.6/cdn/styles/placer.css" />
<script type="module"> import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.6/cdn/components/button/button.js";
// <pc-button> ist registriert und einsatzbereit!</script>Du kannst den Code aus dem Abschnitt Importieren in 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 wirst Dateien wie chunk.[hash].js im chunks/‐Verzeichnis finden. Importiere diese Dateien niemals direkt, da sie automatisch generiert werden und sich zwischen Versionen ändern.
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-toolkitbun add placer-toolkitDies installiert die neueste Version in deinem Projekt.
Danach importierst du die benötigten Komponenten:
// Standardschriften importierenimport "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 importierenimport "placer-toolkit/dist/styles/placer.css";
// Option 2: Nur das Standard‐Design importierenimport "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> importierenimport "placer-toolkit/dist/components/button/button.js";
// <pc-input> importierenimport "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.6.tgzyarn add placer-toolkit-1.0.0-alpha.6.tgzpnpm add placer-toolkit-1.0.0-alpha.6.tgzbun add placer-toolkit-1.0.0-alpha.6.tgzDanach importierst du die benötigten Komponenten:
// Standardschriften importierenimport "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 importierenimport "placer-toolkit/dist/styles/placer.css";
// Option 2: Nur das Standard‐Design importierenimport "placer-toolkit/dist/styles/themes/default.css";
// Option 1: Alle Komponenten importierenimport "placer-toolkit";
// Option 2: Nur benötigte Komponenten importierenimport "placer-toolkit/dist/components/button/button.js";import "placer-toolkit/dist/components/input/input.js";Wahrscheinlich fällt dir auf, 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:innendist/ist für npm‐Nutzer:innen
Diese Änderung wurde in v1.0.0-alpha.1 eingeführt, um Fehler aufgrund der Bare Module Specifier‐Fehler in v0.5.1 zu beheben.