Zum Inhalt springen
NativeCSS

Weitere Web-Awesome-Komponenten

Alle über dieselbe webawesome-bridge.css im NativeCSS-Look - kein zusätzliches CSS pro Komponente nötig. Wo NativeCSS bereits einen nativen Baustein dafür hat (Accordion/Disclosure, Carousel/Slideshow, Drawer/Off-Canvas), ist das jeweils verlinkt zum Vergleich.

<wa-accordion>
  <wa-accordion-item label="Frage 1">Antwort 1</wa-accordion-item>
  <wa-accordion-item label="Frage 2">Antwort 2</wa-accordion-item>
</wa-accordion>

Accordion

Vergleich: natives .ncss-disclosure (ein <details>, kein JS).

Ein natives CSS-Design-System ohne Build-Schritt. Kleine, kuratierte Utility-Sets statt Tailwind-artiger Vollständigkeit. Ja - Web Awesome ist optional, NativeCSS selbst ist reines CSS.

Tabs

Prinzip Bridge Icons Native Mechanismen zuerst, Web Awesome nur ergänzend. Eine Datei (webawesome-bridge.css) übersetzt Web Awesomes Tokens auf ncss-Tokens. Font Awesome, selbst gehostet - sowohl als Webfont-Icon als auch für <wa-icon>.

Avatar

Callout

Hinweis: reines Beispiel, nicht produktiv verlinkt. Erfolgreich gespeichert. Änderungen sind noch nicht veröffentlicht. Fehler beim Speichern - bitte erneut versuchen.

Drawer

Vergleich: natives .ncss-offcanvas (natives <dialog>).

Drawer öffnen

Schiebt sich von der Kante ein - Web Awesomes eigene Komponente, optisch identisch zur nativen Off-Canvas-Variante dank Bridge.

Schließen

Progress

Toast

Benachrichtigung anzeigen

Vorher/Nachher-Vergleich

Vorher Nachher