Untersuche die tatsächlichen semantischen Design-Token von Web Awesome anhand nativer benutzerdefinierter Elemente, einschließlich bereichsspezifischer Änderungen an Eckenradien und Abständen, der Gestaltung des Shadow DOM, des Auswahlverhaltens und der Eingabevalidierung.
Passen Sie Radius- und Abstandsskalen an, wechseln Sie das Erscheinungsbild des Beispiels, wählen Sie eine Region aus und überprüfen Sie einen lokalen Arbeitsbereichsnamen.
Native benutzerdefinierte Elemente von Web Awesome 3.14.0 und Standard-Theme, lokal gebündelt. · Implementierungsreferenz
02
Web Awesome Designreferenz des Designsystems
Das Standard-Theme CSS von Web Awesome 3.14.0 wurde im installierten Paket geprüft. Die Farbeinträge unten sind semantische Aliase; ihre Verweise auf die Farbpalette bleiben erhalten, statt durch vermutete Hex-Werte ersetzt zu werden. Die aus der Skala abgeleiteten Pixelbeispiele setzen einen Root-Wert von 16px und scale=1 voraus.
Web Awesome Designsystem: benutzerdefinierte Elemente mit eigener Komponentengrenze
Custom Elements mit eigener Komponentengrenze
Web Awesome stellt registrierte benutzerdefinierte HTML-Elemente bereit, sodass keine React-Anwendung erforderlich ist. Nach dem Import von wa-input oder wa-select lassen sich die Elemente in gewöhnliches HTML einfügen und über ihre dokumentierten Eigenschaften und Ereignisse steuern. Diese Arbeitsumgebung bündelt Version 3.14.0 und verwendet ausschließlich Komponenten aus dem öffentlichen Paket.
Bei den sichtbaren Steuerelementen handelt es sich um die tatsächlichen benutzerdefinierten Elemente einschließlich ihrer Shadow-Root-Implementierung. Der umgebende Header, die Abschnitte und die Anzeige sind eigens für HTML erstellt. So lässt sich anhand des Beispiels beobachten, welche Gestaltungsentscheidungen über geerbte benutzerdefinierte Eigenschaften die Komponentengrenze überschreiten und welche zur Seitengestaltung gehören.
Web Awesome Designsystem: semantische Farb-Aliase beibehalten
Semantische Farb-Aliase beibehalten
Das Standard-Theme unterscheidet zwischen erhabenen, standardmäßigen und abgesenkten Oberflächen, normalem und zurückhaltendem Text sowie mehreren Paaren aus Markenfüllfarbe und darauf abgestimmter Textfarbe. Die Token-Anzeige verwendet die abgesenkte Oberfläche, das Hauptbeispiel die standardmäßige Oberfläche und das kleine Badge kombiniert brand-fill-quiet mit brand-on-quiet. Diese Rollen bleiben auch bei geändertem Erscheinungsbild aussagekräftig.
Die Referenz behält Aliase wie var(--wa-color-neutral-10) bei, statt jede Rolle einem vermuteten Hex-Wert zuzuordnen. Eine Palette kann sich ändern, während die semantische Zuordnung gültig bleibt. Wenn Sie eine starke Markenaktion anpassen, sollten Sie sowohl die Füllfarbe als auch die darauf abgestimmte Textfarbe berücksichtigen. Wird nur eine davon geändert, kann der Button-Text schwer lesbar werden.
Web Awesome Designsystem: Skalierung ändern, ohne jede Komponente neu zu schreiben
Die Skala anpassen, ohne jede Komponente neu zu schreiben
Die Radiusauswahl ändert --wa-border-radius-scale ausschließlich am Beispiel. Bei Skalierungsfaktor eins ergeben die standardmäßigen kleinen, mittleren und großen Radien bei einem Root-Wert von sechzehn Pixeln drei, sechs und zwölf Pixel. Bei Skalierungsfaktor null werden diese skalierbaren Ecken eckig; bei Skalierungsfaktor zwei verdoppeln sie sich. Die Pill- und Kreis-Tokens sind separate Konzepte und sollten nicht als Teil dieses Multiplikators betrachtet werden.
Die Abstandsauswahl ändert --wa-space-scale. Innenabstände, Lücken und Abstände in der Anzeige des Beispiels verwenden die offiziellen Abstandstokens, sodass sich ihre Verhältnisse gemeinsam ändern. Das bedeutet nicht, dass jede Abmessung jeder Komponente skaliert wird: Für die Größe der Steuerelemente einer Komponente gelten eigene Token-Beziehungen. Das Bearbeitungsfeld bleibt davon unberührt, damit der Vergleich beim Ändern des Beispiels stabil bleibt.
Wählen Sie „Eckig“ und prüfen Sie die Ecken des Eingabefelds, des Containers und der Anzeige.
Wählen Sie „Großzügige Abstände“ und vergleichen Sie die Lücken im Beispiel mit dem unveränderten Bearbeitungsfeld.
Setzen Sie die Standardwerte zurück, um beide Multiplikatoren und das Erscheinungsbild gemeinsam wiederherzustellen.
Web Awesome Designsystem: Typografie-Tokens und eigens gewählte Überschriften
Typografie-Tokens und ursprüngliche Überschriftenwahl
Die Standardschriftfamilie für Fließtext lautet ui-sans-serif, system-ui, sans-serif. Die Alias-Schriftfamilie für Überschriften verweist auf die Fließtextschriftfamilie, während für Code ui-monospace verwendet wird. Das Token für die normale Zeilenhöhe hat den Wert 1.6, das für die kompakte Zeilenhöhe 1.2. Das mittlere Schriftgrößen-Token entspricht einem rem multipliziert mit font-size-scale; größere Schriftgrößen verwenden gerundete Berechnungen. Die Tabelle zeigt diese Ausdrücke, statt ihre Abhängigkeiten zu verbergen.
Die Arbeitsumgebung selbst verwendet eine Überschrift mit 34px und eine Abschnittsüberschrift mit 23px. An einem lokalen Breakpoint von 700px wird die Seitenüberschrift verkleinert. Dabei handelt es sich ausdrücklich um eigene Seitenregeln. Die nativen Felder behalten das Label- und Hinweis-Styling der Bibliothek bei, sodass sich eine individuelle Seitenhierarchie mit der Standardtypografie der Komponenten vergleichen lässt.
Web Awesome Designsystem: Anfangswerte, Eigenschaften und Änderungsereignisse
Ausgangswerte, Eigenschaften und Änderungsereignisse
Jedes Auswahlfeld enthält wa-option-Elemente mit stabilen Werten. Bei den Standardoptionen wird das Attribut selected verwendet, wie es der aktuellen Anleitung für die initiale Auswahl entspricht. Laufzeitänderungen lesen die value-Eigenschaft des Auswahlfelds aus. Die Theme-Steuerelemente reagieren auf change-Ereignisse und aktualisieren benutzerdefinierte Eigenschaften von CSS; sie lesen keine Texte aus den dargestellten Optionsbeschriftungen aus.
Die Regionsauswahl ist ein reguläres Beispiel-Formularfeld und steuert keinen externen Speicherdienst. Der ausgewählte Wert wird in der lokalen Aktionsmeldung ausgegeben. Die Oberfläche erweckt nicht den Eindruck, dass durch die Auswahl von Europa Speicherplatz zugewiesen wird. Diese Unterscheidung ist wichtig, wenn eine realistisch wirkende Komponentendemonstration Produktbegriffe verwendet.
Web Awesome Designsystem: Gestaltung mit Tokens und dokumentierten Parts
Mit Tokens und dokumentierten Teilen gestalten
Gewöhnliche Selektoren für Nachfahren können nicht ohne Weiteres auf den Shadow Tree einer Komponente zugreifen. Dieses Beispiel nutzt geerbte Theme-Variablen, damit Hintergrund, Text und Radius des Felds mit der umgebenden Gestaltung von HTML abgestimmt bleiben. Das ist eine unterstützte Styling-Schnittstelle und kein Versuch, internes, generiertes Markup anzusprechen.
Für komponentenspezifische Änderungen konsultieren Sie die dokumentierten benutzerdefinierten Eigenschaften und Parts von CSS für die jeweilige Komponente. Ein globaler Selektor für Eingabefelder ändert nicht zwangsläufig das interne Eingabefeld von wa-input. Umgekehrt kann eine Theme-Klasse oder -Variable auf einem gemeinsamen Vorfahren viele benutzerdefinierte Elemente unterhalb davon gezielt beeinflussen. Wählen Sie den Geltungsbereich daher sorgfältig aus.
Web Awesome Designsystem: Aktualisierung, Validierung und lokale Ergebnisse
Aktualisierung, Validierung und lokale Ergebnisse
Die Registrierung einer Komponente erfolgt aus Sicht der Seite asynchron. Das Beispiel wartet mit customElements.whenDefined auf die verwendeten APIs und anschließend auf die Aktualisierung der Auswahlfelder, bevor es die Anfangswerte ausliest. So werden Standardwerte nicht auf ein Element angewendet, das noch nicht vom unbekannten HTML-Tag zu seiner Komponentenklasse hochgestuft wurde.
Die Workspace-Aktion verwendet setCustomValidity und reportValidity auf wa-input. Ein getrimmter Name mit weniger als zwei Zeichen wird zurückgewiesen; ein input-Ereignis löscht den benutzerdefinierten Fehler, sodass die Eingabe korrigiert und erneut geprüft werden kann. Der deaktivierte Button „Später einladen“ ist ein nativer deaktivierter Zustand der Komponente. Der Statustext gibt nur einen lokal angewendeten Namen aus. Der vollständige Code enthält keine Anfrage zum Erstellen eines Workspace oder zum Zuweisen von Ressourcen.
Barrierefreie Beschriftungen werden über label-Attribute bereitgestellt.
Hinweise erläutern die Namensvorgabe, bevor ein Fehler auftritt.
Die deaktivierte Aktion bleibt inaktiv und macht dennoch ihren Zweck deutlich.
Web Awesome-Designsystem: Theme und verwendete Komponenten importieren
Das Theme und die verwendeten Komponenten importieren
Installiere @awesome.me/[email protected] in einer Vite-Vanilla-Anwendung und verwende die bereitgestellte main.js als Einstiegspunkt. Das Stylesheet des Standard-Themes ist erforderlich. Das Beispiel bindet absichtlich weder den umfassenderen nativen Reset noch das Utility-Bundle ein, da das Seitenlayout explizit definiert ist CSS. Die Importe registrieren die fünf im Markup verwendeten Komponententypen.
Die npm-dist-Module sind für Bundler vorgesehen. Die dist-cdn-Distribution ist eine Alternative, um Module direkt im Browser zu laden, da Abhängigkeiten dort anders gebündelt werden. Übernimm keinen dist-Import in ein einfaches Script-Tag und gehe davon aus, dass sich ungebundene Abhängigkeiten auflösen lassen. Komponenten, die externe Assets benötigen, erfordern die dokumentierte Konfiguration des Basispfads. Dieses Beispiel kommt ohne bereitgestellte Icon-Assets aus und ist für den Offline-Betrieb gebündelt.
Web Awesome-Designsystem: öffentliche Komponenten und klare Theme-Grenzen
Öffentliche Komponenten und klar abgegrenzte Themes
Die Werkbank zeigt das Standard-Theme und öffentliche Komponenten. Einige Komponenten, Muster und Designressourcen von Web Awesome sind Pro-Angebote. Daher wird auf der Seite nicht der Eindruck erweckt, dass die Installation des öffentlichen Pakets alle Elemente des Katalogs freischaltet. Prüfe die Verfügbarkeit einer Komponente, bevor du sie zu einer erforderlichen Abhängigkeit in einem gemeinsam genutzten Designsystem machst.
Ein wiederverwendbares Produkttheme sollte dokumentieren, welche Variablen geändert werden, für welchen Bereich sie gelten und wie beide Darstellungsmodi geprüft werden. Die interaktive Werkbank zeigt den Prozess im Kleinen: Leserinnen und Leser können die genau geänderten Variablen prüfen und die resultierenden nativen Komponenten vergleichen, statt sich auf ein losgelöstes Palettenbild zu verlassen.
Anfangsauswahlen werden mit selected auf wa-option festgelegt.
Es werden ausschließlich kostenlose Komponenten verwendet.
Vollständige Importe und Token-Steuerelemente
Registriert Komponenten, wartet auf deren Upgrade, ändert bereichsbezogene Custom Properties und setzt die lokale Validierung um.
javascript
import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/components/button/button.js';
import '@awesome.me/webawesome/dist/components/input/input.js';
import '@awesome.me/webawesome/dist/components/select/select.js';
import '@awesome.me/webawesome/dist/components/option/option.js';
import '@awesome.me/webawesome/dist/components/switch/switch.js';
import './style.css';
const $=id=>document.getElementById(id);function update(){const s=$('specimen');s.style.setProperty('--wa-border-radius-scale',$('radius').value);s.style.setProperty('--wa-space-scale',$('spacing').value);s.classList.toggle('wa-dark',$('dark').checked);s.classList.toggle('wa-light',!$('dark').checked);$('values').textContent=`--wa-border-radius-scale: ${$('radius').value};\n--wa-space-scale: ${$('spacing').value};`;}
Promise.all(['wa-select','wa-switch','wa-input','wa-button'].map(x=>customElements.whenDefined(x))).then(async()=>{await Promise.all([...document.querySelectorAll('wa-select')].map(e=>e.updateComplete));for(const id of ['radius','spacing','dark'])$(id).addEventListener('change',update);$('reset').addEventListener('click',()=>{$('radius').value='1';$('spacing').value='1';$('dark').checked=false;update()});$('create').addEventListener('click',()=>{const field=$('workspace');field.setCustomValidity(field.value.trim().length<2?'Use at least two non-space characters.':'');if(!field.reportValidity())return;$('result').textContent=`Applied “${field.value.trim()}” in the ${$('region').value} specimen. No workspace or storage allocation was created.`});$('workspace').addEventListener('input',()=>$('workspace').setCustomValidity(''));update()});
Erstelle ein Vite-Vanilla-Projekt und verwende die oben gezeigten vollständigen Dateien main.js und style.css.
04
Web Awesome-Designsystem: Agent einrichten
Ausgangspunkt für die Implementierung
Die vollständige main.js, CSS und die Body-Beispiele bilden die Werkbank in einem Bundler nach. Die Offline-Demo ist ein esbuild-Bundle, in das das Theme CSS eingebettet ist. Ein React-Provider ist nicht erforderlich.
javascript
// Create a Vite vanilla project, then install:
// npm install @awesome.me/[email protected]
// index.html: paste the complete workbench markup in body,
// then add <script type="module" src="/main.js"></script>.
// main.js: use the complete imports and token-controls example above.
// style.css: use the complete scoped specimen CSS above.
// Minimum registration pattern used by this example:
import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/components/button/button.js';
import '@awesome.me/webawesome/dist/components/input/input.js';
import '@awesome.me/webawesome/dist/components/select/select.js';
import '@awesome.me/webawesome/dist/components/option/option.js';
import '@awesome.me/webawesome/dist/components/switch/switch.js';
// Do not duplicate these imports if using the complete main.js above.
Ein Prompt für dein Projekt
Agenten-Prompt
Verwende die bereichsbezogene Token-Werkbank Web Awesome 3.14.0 und registriere die bereitgestellten Elemente wa-select, wa-option, wa-input, wa-button und wa-switch. Warte auf die Definition der Komponenten und auf updateComplete, bevor du die anfänglichen Auswahlen ausliest. Wende --wa-border-radius-scale und --wa-space-scale nur auf den Beispielbereich an und schalte dort zwischen den Klassen wa-light und wa-dark um, ohne andere Seiteninhalte zu verändern. Halte die sichtbare Token-Anzeige mit den nativen Steuerelementen synchron und behalte die Beschriftungen bei. Verwende die Werkbank als Prüfwerkzeug, nicht als Oberfläche zur Geräteverwaltung.
05
Web Awesome-Designsystem: Quellen und Geltungsbereich
Öffentliche Komponenten und Standard-Theme von Web Awesome 3.14.0. Das Layout ist eine eigene Gestaltungsentscheidung; die lokale Eingabe eines Namens erstellt keinen Arbeitsbereich und speichert keine Daten.
