Native Webkomponenten für
moderne Benutzeroberflächen
Flexibel. Barrierefrei. Webkomponenten.
Was ist Placer Toolkit?
Placer Toolkit ist eine Open‐Source‐Bibliothek für Webkomponenten, mit der du Websites mit jedem Framework – oder ganz ohne – erstellen kannst.
Vollständig nativ
Placer Toolkit basiert auf Webstandards und funktioniert in jedem Framework – oder ganz ohne. Keine Bindung, keine Kompromisse.
Vollständig barrierefrei
Entwickelt mit Barrierefreiheit, Internationalisierung (71 Sprachen direkt verfügbar) und starkem Entwicklererlebnis. Jeder kann es nutzen, überall.
Flexibel
Komponenten lassen sich einfach neu gestalten, anpassen und auf dein Design abstimmen. Deine Website, deine Regeln.
Warum solltest du Placer Toolkit wählen?
Dieser Vergleich zeigt die entsprechende Funktionalität in einem CSS‐basierten Toolkit wie Bootstrap und in einem webkomponenten‐basierten Toolkit wie Placer Toolkit, was eine massive Reduzierung der Codekomplexität sowie eine verbesserte Lesbarkeit demonstriert.
<!-- Bootstrap -->
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="modal-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="modal-label">Dialog</h1>
<button
class="btn-close"
type="button"
aria-label="Close"
data-bs-dismiss="modal"
></button>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="modal-footer">
<button
class="btn btn-secondary"
type="button"
data-bs-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
<button class="btn btn-secondary" type="button" data-bs-toggle="modal" data-bs-target="#modal">
Open dialog
</button><!-- Placer Toolkit -->
<pc-dialog label="Dialog" id="dialog">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<pc-button variant="plain" slot="footer" data-dialog="close">
Close
</pc-button>
</pc-dialog>
<pc-button data-dialog="open dialog">
Open dialog
</pc-button><!-- Bootstrap -->
<div class="form-check">
<input class="form-check-input" id="option-1" type="checkbox" value="" />
<label class="form-check-label" for="option-1">Option 1</label>
</div>
<div class="form-check">
<input
class="form-check-input"
id="option-2"
type="checkbox"
value=""
checked
/>
<label class="form-check-label" for="option-2">Option 2</label>
</div>
<div class="form-check">
<input class="form-check-input" id="option-3" type="checkbox" value="" />
<label class="form-check-label" for="option-3">Option 3</label>
</div><!-- Placer Toolkit -->
<div class="checkboxes">
<pc-checkbox>Option 1</pc-checkbox>
<pc-checkbox checked>Option 2</pc-checkbox>
<pc-checkbox>Option 3</pc-checkbox>
</div>
<style>
.checkboxes pc-checkbox {
display: block;
}
</style><!-- Bootstrap -->
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">Secondary</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-danger" type="button">Danger</button><!-- Placer Toolkit -->
<pc-button appearance="neutral">Neutral</pc-button>
<pc-button appearance="primary">Primary</pc-button>
<pc-button appearance="success">Success</pc-button>
<pc-button appearance="warning">Warning</pc-button>
<pc-button appearance="danger">Danger</pc-button><!-- Bootstrap -->
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading…</span>
</div><!-- Placer Toolkit -->
<pc-spinner></pc-spinner>Designvorschau
Das Styling-System von Placer Toolkit basiert auf 18 einzigartigen Kombinationen, die sich aus drei verschiedenen Designs, drei vielseitigen Farbpaletten und zwei klaren Farbschemata ergeben. Nutze diese interaktive Vorschau, um das gestalterische Potenzial des Toolkits sofort zu erkunden.
Open‐Source‐Unterstützung
Placer Toolkit wurde mithilfe dieser hervorragenden Open‐Source‐Bibliotheken entwickelt, die verschiedene Projektfunktionen unterstützen.
Unsere Website ist zu 100 % frei von Cookies! Wir legen großen Wert auf deine Privatsphäre und speichern daher keinerlei Cookies oder persönliche Informationen über dich.
Dein Browserverlauf bleibt sauber und deine Daten sind geschützt, ganz im Einklang mit modernen Datenschutzstandards wie der DSGVO. Genieße deinen Besuch ganz ohne digitale Cookies! 🍪🚫
Weitere Informationen findest du in unserer Datenschutzerklärung.