Usa il contratto reale e open source di Switch di Amsterdam, con un tema neutro completo, etichette accessibili e preferenze di lettura applicate immediatamente.
CSS4.4.0 dello Switch nativo Amsterdam, tema neutro originale e comportamento dell’applicazione; nessuna risorsa proprietaria. · Riferimento per l’implementazione
02
Riferimento di progettazione del sistema di design Amsterdam
Implementazione di CSS e React4.4.0 esaminata; verificato il confine tra token e risorse proprietarie. Tutti i valori del tema dell’anteprima sono originali.
sistema di design Amsterdam: separazione tra componente e tema
Usa correttamente il livello open source
Amsterdam pubblica separatamente il componente CSS, così il relativo contratto delle classi può essere implementato al di fuori di React. Il foglio di stile dipende dalle proprietà personalizzate di CSS; importarlo senza un tema completo lascia irrisolte dimensioni e colori importanti. Per questo, in questo esempio il foglio di stile dello Switch nativo è abbinato a una configurazione neutra originale completa.
Il repository separa i pacchetti open source dalle risorse proprietarie. Il pacchetto di token esaminato, versione 4.3.0, include una propria nota di licenza che lo esclude dalla licenza open source. Anche Amsterdam Sans, le icone e il logo della città sono soggetti a restrizioni specifiche. Questa guida li cita come contesto, ma non li ridistribuisce né sostiene che il download da npm pubblico conceda diritti d’uso illimitati del brand.
sistema di design Amsterdam: una configurazione neutra completa
Fornisci tutte le proprietà necessarie al componente
La tabella di riferimento elenca tutte le variabili usate dal foglio di stile dello Switch selezionato. Larghezza, dimensioni della manopola, spessore del bordo, colori, offset del contorno, cursore ed effetto hover hanno tutti valori espliciti. Si tratta di valori originali per questo esempio, non di token di progettazione Amsterdam copiati. Questa distinzione consente ai lettori di riprodurre l’esempio senza dover indovinare i valori mancanti del tema.
La traccia è larga 50px, con una manopola da 22px e un bordo da 3px. La trasformazione nativa dello stato checked calcola lo spostamento in base alla larghezza della manopola e allo spessore del bordo. Modificare solo la larghezza della traccia può quindi disallineare la manopola; modifica insieme le dimensioni correlate e verifica entrambi gli stati.
sistema di design Amsterdam: anatomia dello Switch nativo
L’etichetta deve seguire l’input
L’implementazione di React genera un contenitore, un input e un’etichetta associata vuota. Il relativo CSS usa selettori di fratello adiacente per applicare uno stile all’etichetta in base agli stati di focus, checked e disabled dell’input. Mantieni questo ordine in un’implementazione HTML semplice: inserendo una descrizione tra l’input e l’etichetta, i selettori non funzionano più.
L’input effettivo è una checkbox con role="switch". Mantiene la proprietà nativa checked e il comportamento da tastiera. Poiché l’etichetta visiva non contiene testo, fornisci un nome accessibile tramite aria-label o aria-labelledby. L’esempio fa riferimento al titolo visibile dell’impostazione e collega la relativa spiegazione tramite aria-describedby.
sistema di design Amsterdam: impostazioni immediate
Uno switch modifica la visualizzazione corrente
Il codice sorgente del componente definisce Switch come un’impostazione binaria immediata. L’anteprima rispetta questo comportamento: il testo più grande modifica le dimensioni dell’articolo, il contrasto maggiore modifica il testo e il contorno, mentre la riduzione del movimento elimina il breve effetto di comparsa del badge. Non c’è un pulsante Salva che finga di inviare queste scelte locali a un servizio dell’account.
Ripristina impostazioni predefinite azzera tutti e tre gli stati checked nativi e riapplica le classi predefinite dell’articolo. Un messaggio di stato descrive le impostazioni attive. Le modifiche non vengono mantenute dopo la navigazione o il ricaricamento. Un servizio di preferenze in produzione potrebbe aggiungere la persistenza, ma dovrebbe specificare se l’impostazione riguarda questa pagina, un dispositivo o un account.
Attiva Testo più grande e controlla le dimensioni del paragrafo nell’articolo accanto.
Porta il focus su Contrasto maggiore e premi Spazio per attivarlo o disattivarlo con la tastiera.
Ripristina le impostazioni predefinite e verifica che tutti e tre gli interruttori e l’articolo tornino allo stato iniziale insieme.
Sistema di design Amsterdam: tastiera, focus e movimento
Mantieni disponibile l’input nativo
Il foglio di stile riduce la larghezza visiva dell’input, ma mantiene il controllo effettivo. Il selettore di focus applica il contorno all’etichetta successiva. Sostituire l’input con un div decorativo eliminerebbe la semantica nativa del modulo e richiederebbe un’implementazione separata per la tastiera. Non applicare display:none all’input.
Il foglio di stile nativo limita le transizioni a prefers-reduced-motion:no-preference. Anche l’effetto sull’articolo rispetta la preferenza del sistema operativo, indipendentemente dall’interruttore locale. Chi richiede meno movimento a livello di sistema non dovrebbe dover scoprire un interruttore aggiuntivo prima che l’esempio si comporti in modo discreto.
Usa la proprietà checked come fonte attendibile; non inventare uno stato visivo attivo non correlato.
Assegna a ogni impostazione un nome stabile e associa la relativa spiegazione all’input.
Dopo aver modificato la geometria o i colori del tema, prova gli stati disattivato, attivato, con focus e disabilitato.
Sistema di design Amsterdam: composizione dell’anteprima di lettura
Mostra l’effetto accanto al controllo
L’esempio usa una composizione a due colonne, così ogni impostazione ha un effetto visibile sull’articolo. Sotto un punto di interruzione specifico dell’applicazione di 700px, i controlli si dispongono sopra l’anteprima. La larghezza massima di 900px e la spaziatura di 32px sono scelte originali per il layout, non indicazioni di un token della griglia cittadina.
Il carattere neutro è Arial. Il testo del corpo è di 18px con interlinea 1.5; la modalità testo più grande modifica solo l’articolo, portandolo a 22px. È un esempio di impostazione dell’applicazione, non un’alternativa allo zoom del browser né un’affermazione che queste dimensioni siano prescritte da Amsterdam. Le etichette lunghe vanno a capo senza ridurre la larghezza dell’interruttore nativo.
Sistema di design Amsterdam: integrazione CSS o React
Scegli il livello di implementazione
In un’applicazione React esistente, il componente Switch verificato accetta gli attributi standard di input e inoltra il ref all’input. L’uso controllato fornisce checked e onChange; quello non controllato può fornire defaultChecked. Il componente non include un sistema di archiviazione per l’applicazione né una API per le preferenze dell’account.
Per questo esempio HTML indipendente è necessario soltanto lo Switch CSS open source. La configurazione e il codice completo forniscono la configurazione del tema mancante e la gestione dello stato locale. Il programma di installazione del pacchetto potrebbe scaricare risorse proprietarie come dipendenze; averle sul disco non autorizza a importarle o distribuirle. L’esempio incluso contiene solo il CSS selezionato e la relativa licenza open source.
Non confondere la somiglianza visiva con un’affiliazione
Il sistema cittadino mira a rendere coerenti e accessibili i prodotti municipali. Il relativo codice riutilizzabile può essere studiato e adattato nei limiti della sua licenza, ma il logo, il carattere proprietario e le icone sono soggetti a condizioni separate. L’anteprima usa un’identità visiva originale e contenuti neutri, per evitare che venga scambiata per un servizio Amsterdam.
L’ambito verificato comprende un componente nativo con un tema personalizzato completo e un comportamento locale significativo. Non è una reimplementazione completa del tema cittadino. Un prodotto reale che adotta il pacchetto CSS più ampio dovrebbe definire e verificare tutte le variabili richieste dagli altri componenti, invece di estendere per analogia questa configurazione di Switch a controlli non correlati.
Sistema di design Amsterdam: configurazione dell’agente AI
Punto di partenza per l’implementazione
Solo CSS open source; tema originale completo ed esempio HTML funzionante. Non viene distribuito alcun pacchetto proprietario di token o risorse. Il file ZIP completo dell’esempio funzionante, disponibile in Sources, include anche le dipendenze esatte dell’anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 in quella directory, poi apri http://localhost:8080/amsterdam.html. Non aprire gli esempi basati su moduli tramite 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.
Un prompt per il tuo progetto
Prompt per l’agente
Usa lo Switch CSS open source Amsterdam con un tema originale completo. Mantieni la struttura wrapper/input/etichetta adiacente, role=switch e un nome accessibile. Applica subito le impostazioni binarie e usa checked come stato. Rispetta la preferenza di movimento ridotto e distingui le preferenze locali da quelle dell’account persistenti. Non importare token, caratteri, loghi o icone proprietari senza i diritti pertinenti.
05
Sistema di design Amsterdam: fonti e ambito
Esempio indipendente di OpenDesign. I token di brand Amsterdam, Amsterdam Sans, le icone ufficiali e il logo non sono inclusi.
