Verwenden Sie den echten Open-Source-Switch-Vertrag von Amsterdam mit einem vollständigen neutralen Theme, barrierefreien Beschriftungen und sofort verfügbaren Leseeinstellungen.
Natives Amsterdam Switch CSS4.4.0, originales neutrales Theme und Anwendungsverhalten; keine proprietären Assets. · Implementierungsreferenz
02
Designreferenz des Amsterdam-Designsystems
Implementierung von CSS und React4.4.0 geprüft; Grenze zu proprietären Design Tokens und Assets kontrolliert. Alle Theme-Werte der Vorschau sind original.
Amsterdam-Designsystem: Komponente und Theme trennen
Die Open-Source-Ebene korrekt verwenden
Amsterdam veröffentlicht die Komponente CSS separat, sodass sich ihr Klassenvertrag auch außerhalb von React implementieren lässt. Das Stylesheet ist von den benutzerdefinierten Eigenschaften von CSS abhängig. Wird es ohne vollständiges Theme importiert, bleiben wichtige Abmessungen und Farben undefiniert. Deshalb wird das native Switch-Stylesheet in diesem Beispiel mit einer vollständigen, eigens erstellten neutralen Konfiguration kombiniert.
Das Repository trennt Open-Source-Pakete von proprietären Assets. Für das untersuchte Token-Paket 4.3.0 gibt es einen eigenen Lizenzhinweis, der es von der Open-Source-Lizenz ausnimmt. Amsterdam Sans, die Icons und das Stadtlogo unterliegen ebenfalls besonderen Einschränkungen. Dieser Leitfaden erwähnt sie als Kontext, verbreitet sie aber weder weiter noch behauptet er, dass ein öffentlicher npm-Download uneingeschränkte Markenrechte gewährt.
Gib alle Eigenschaften an, die die Komponente benötigt
Die Referenztabelle führt alle Variablen auf, die das ausgewählte Switch-Stylesheet verwendet. Breite, Abmessungen des Schaltknopfs, Rahmenbreite, Farben, Outline-Abstand, Cursor und Hover-Darstellung sind jeweils mit konkreten Werten versehen. Dies sind eigens für dieses Beispiel festgelegte Werte, keine kopierten Amsterdam Design-Tokens. Dank dieser Unterscheidung können Leser das Beispiel nachbilden, ohne fehlende Bestandteile des Themes erraten zu müssen.
Der Schalter ist 50px breit und hat einen 22px großen Schaltknopf sowie einen 3px breiten Rahmen. Die Transformation im nativen checked-Zustand berechnet den Verschiebeweg anhand der Breite des Schaltknopfs und der Rahmenbreite. Wird nur die Breite des Schalters geändert, kann der Schaltknopf daher falsch positioniert sein. Passe zusammengehörige Geometriewerte gemeinsam an und überprüfe beide Zustände.
Amsterdam Designsystem – Aufbau eines nativen Schalters
Das Label muss auf das Input-Element folgen
Die React-Implementierung rendert einen Wrapper, ein Input-Element und ein leeres, zugehöriges Label. Das CSS verwendet Geschwisterselektoren, um das Label anhand der Fokus-, checked- und disabled-Zustände des Input-Elements zu gestalten. Behalte diese Reihenfolge bei einer einfachen HTML-Implementierung bei. Ein zwischen Input-Element und Label eingefügter Beschreibungstext unterbricht diese Selektoren.
Das tatsächliche Input-Element ist eine Checkbox mit role="switch". Es behält die native checked-Eigenschaft und das native Tastaturverhalten bei. Da das visuelle Label keinen Text enthält, musst du über aria-label oder aria-labelledby einen zugänglichen Namen bereitstellen. Das Beispiel verweist auf einen sichtbaren Einstellungstitel und verknüpft die Erklärung über aria-describedby.
Laut Komponentenquelle ist Switch eine sofort wirksame binäre Einstellung. Die Vorschau folgt diesem Verhalten: Größere Schrift verändert die Textgröße des Artikels, höherer Kontrast verändert Text und Outline, und bei reduzierter Bewegung entfällt der kurze Einblendeffekt des Badges. Es gibt keinen Speichern-Button, der fälschlich den Eindruck erweckt, diese lokalen Einstellungen würden an einen Kontodienst übermittelt.
„Standards wiederherstellen“ deaktiviert alle drei nativen checked-Zustände und weist dem Artikel wieder die Standardklassen zu. Eine Statusmeldung beschreibt die aktivierten Einstellungen. Nach dem Navigieren oder Neuladen bleiben sie nicht erhalten. Ein Produktivsystem für Einstellungen könnte eine Persistenz ergänzen, sollte aber angeben, ob die Einstellung für diese Seite, ein Gerät oder ein Konto gilt.
Aktiviere „Größere Schrift“ und überprüfe die Absatzgröße im Artikel daneben.
Fokussiere „Höherer Kontrast“ und drücke die Leertaste, um die Einstellung per Tastatur umzuschalten.
Stelle die Standards wieder her und überprüfe, ob alle drei Schalter und der Artikel gemeinsam zurückgesetzt werden.
Amsterdam Designsystem – Tastatur, Fokus und Bewegung
Das native Input-Element muss verfügbar bleiben
Das Stylesheet verringert die visuelle Breite des Input-Elements, lässt das tatsächliche Steuerelement aber bestehen. Der Fokus-Selektor legt die Outline auf das folgende Label. Ersetzt du das Input-Element durch ein dekoratives div, gehen native Formularsemantik verloren und eine separate Tastaturimplementierung wird erforderlich. Setze für das Input-Element nicht display:none.
Das native Stylesheet beschränkt Übergänge auf prefers-reduced-motion:no-preference. Auch der Effekt im Artikel berücksichtigt unabhängig vom lokalen Schalter die Einstellung des Betriebssystems. Wer systemweit weniger Bewegung wünscht, sollte nicht erst einen zusätzlichen Schalter suchen müssen, damit sich das Beispiel entsprechend verhält.
Verwende die Eigenschaft checked als maßgebliche Quelle. Erfinde keinen davon unabhängigen visuellen Aktivzustand.
Gib jeder Einstellung einen eindeutigen Namen und verknüpfe ihre Erklärung mit dem Input-Element.
Teste nach Änderungen an Theme-Geometrie oder Farben die Zustände Aus, Ein, Fokus und Deaktiviert.
Das Beispiel verwendet ein zweispaltiges Layout, sodass jede Einstellung eine sichtbare Auswirkung auf den Artikel hat. Unterhalb eines anwendungsspezifischen Breakpoints von 700px werden die Steuerelemente oberhalb der Vorschau angeordnet. Die maximale Breite von 900px und der Abstand von 32px sind individuelle Layoutentscheidungen und kein Beleg für ein stadtweit gültiges Raster-Token.
Als neutrale Schriftart dient Arial. Der Fließtext hat eine Größe von 18px und einen Zeilenabstand von 1.5; der Modus „Größere Schrift“ ändert ausschließlich den Artikel auf 22px. Dies veranschaulicht eine anwendungsspezifische Einstellung. Es ist kein Ersatz für den Browserzoom und bedeutet nicht, dass Amsterdam diese Größen vorschreibt. Lange Labels werden umbrochen, ohne die Breite des nativen Schalters zu verringern.
Amsterdam Designsystem – Integration mit CSS oder React
Wähle die Implementierungsebene
In einer bestehenden React-Anwendung akzeptiert die geprüfte Switch-Komponente die üblichen Input-Attribute und leitet die ref an das Input-Element weiter. Für eine gesteuerte Verwendung werden checked und onChange angegeben; bei einer ungesteuerten Verwendung kann defaultChecked angegeben werden. Die Komponente stellt weder Anwendungsspeicher noch einen API für Kontoeinstellungen bereit.
Für dieses unabhängige HTML-Beispiel ist nur die Open-Source-Switch-CSS erforderlich. Das Setup und der vollständige Code ergänzen die fehlende Theme-Konfiguration und die lokale Zustandsverwaltung. Das Paketinstallationsprogramm kann proprietäre Assets als Abhängigkeiten herunterladen. Dass sie auf der Festplatte vorhanden sind, berechtigt jedoch nicht dazu, sie zu importieren oder auszuliefern. Das mitgelieferte Beispiel enthält nur die ausgewählte CSS und ihre Open-Source-Lizenz.
Amsterdam Designsystem – Einsatz und Einschränkungen
Visuelle Ähnlichkeit bedeutet keine Zugehörigkeit
Das städtische System soll kommunale Produkte konsistent und barrierefrei gestalten. Der wiederverwendbare Code kann im Rahmen seiner Lizenz untersucht und angepasst werden. Für Logo, proprietäre Schrift und Icon-Assets gelten jedoch eigene Bedingungen. Die Vorschau verwendet eine eigens erstellte Markenidentität und neutrale Inhalte, damit sie nicht mit einem Amsterdam-Dienst verwechselt wird.
Der geprüfte Umfang umfasst eine native Komponente mit vollständig angepasstem Theme und sinnvoller lokaler Funktionalität. Es handelt sich nicht um eine vollständige Neuimplementierung des städtischen Themes. Ein echtes Produkt, das das umfassendere CSS-Paket übernimmt, sollte alle von weiteren Komponenten benötigten Variablen definieren und testen, statt die Konfiguration dieses Switch auf andere Steuerelemente zu übertragen.
Amsterdam – Einrichtung des Designsystem-KI-Agenten
Ausgangspunkt für die Implementierung
Nur Open-Source-CSS; ein vollständiges eigenes Theme und ein funktionierendes HTML folgen. Es werden keine proprietären Token- oder Asset-Pakete mitgeliefert. Das vollständige ZIP mit dem funktionierenden Beispiel unter Sources enthält außerdem die exakten Abhängigkeiten für die Vorschau und das vollständige Dokument. Entpacken Sie die Datei, führen Sie in diesem Verzeichnis python3 -m http.server 8080 aus und öffnen Sie anschließend http://localhost:8080/amsterdam.html. Öffnen Sie modulbasierte Beispiele nicht über file://.
bash
npm install @amsterdam/[email protected]
# Copy dist/switch/switch.css into your public assets.
# Load it before the complete original theme configuration below.
# Do not import the proprietary assets or tokens for this neutral example.
Ein Prompt für dein Projekt
Agenten-Prompt
Verwenden Sie das Open-Source-Switch-Amsterdam CSS mit einem vollständigen eigenen Theme. Behalten Sie die Anatomie aus Wrapper, Input und angrenzendem Label, role=switch und barrierefreier Benennung bei. Wenden Sie binäre Einstellungen sofort an und verwenden Sie checked als Status. Berücksichtigen Sie reduzierte Bewegung und unterscheiden Sie lokale Einstellungen von gespeicherten Kontoeinstellungen. Importieren Sie keine proprietären Token, Schriftarten, Logos oder Icons ohne die entsprechenden Rechte.
05
Amsterdam – Quellen und Geltungsbereich des Designsystems
Unabhängiges OpenDesign-Beispiel. Amsterdam-Markentoken, Amsterdam Sans, offizielle Icons und das Logo sind nicht enthalten.
