# Sistema di progettazione AWS Cloudscape ## Anteprima dell’interfaccia del sistema di progettazione sistema di design AWS Cloudscape Prova nomi non validi, scegli un profilo di capacità, passa dalla configurazione alla revisione, cambia aspetto e conferma la configurazione in locale. ## Riferimento di progettazione del sistema di progettazione sistema di design AWS Cloudscape Componenti Cloudscape 3.0.1390 e design-tokens 3.0.114, tema visual-refresh. I valori sono letti dal JSON dei token pubblicato. Le modalità cromatiche e le densità dei contenuti sono dimensioni separate. Questo è un riferimento a un’implementazione selezionata, non l’esportazione completa dei token. ### Ruoli semantici del colore nelle modalità chiara e scura | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | color-background-layout-main | light: #ffffff; dark: #161d26 | Usa questo ruolo denominato nel contesto previsto; la coppia mostra i valori risultanti nelle modalità chiara e scura, non campioni intercambiabili. | | color-background-container-content | light: #ffffff; dark: #161d26 | Usa questo ruolo denominato nel contesto previsto; la coppia mostra i valori risultanti nelle modalità chiara e scura, non campioni intercambiabili. | | color-text-body-default | light: #0f141a; dark: #c6c6cd | Usa questo ruolo denominato nel contesto previsto; la coppia mostra i valori risultanti nelle modalità chiara e scura, non campioni intercambiabili. | | color-text-body-secondary | light: #424650; dark: #c6c6cd | Usa questo ruolo denominato nel contesto previsto; la coppia mostra i valori risultanti nelle modalità chiara e scura, non campioni intercambiabili. | | color-text-interactive-default | light: #424650; dark: #dedee3 | Usa questo ruolo denominato nel contesto previsto; la coppia mostra i valori risultanti nelle modalità chiara e scura, non campioni intercambiabili. | | color-text-link-default | light: #006ce0; dark: #42b4ff | Usa questo ruolo denominato nel contesto previsto; la coppia mostra i valori risultanti nelle modalità chiara e scura, non campioni intercambiabili. | | color-text-status-error | light: #db0000; dark: #ff7a7a | Usa questo ruolo denominato nel contesto previsto; la coppia mostra i valori risultanti nelle modalità chiara e scura, non campioni intercambiabili. | | color-text-status-success | light: #00802f; dark: #2bb534 | Usa questo ruolo denominato nel contesto previsto; la coppia mostra i valori risultanti nelle modalità chiara e scura, non campioni intercambiabili. | | color-border-input-default | light: #8c8c94; dark: #656871 | Usa questo ruolo denominato nel contesto previsto; la coppia mostra i valori risultanti nelle modalità chiara e scura, non campioni intercambiabili. | | color-background-button-primary-default | light: #006ce0; dark: #42b4ff | Usa questo ruolo denominato nel contesto previsto; la coppia mostra i valori risultanti nelle modalità chiara e scura, non campioni intercambiabili. | ### Tipografia di corpo e titoli | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | font-size-body-m | 14px | Abbina font-size e line-height dello stesso ruolo. Le varianti Header e Box applicano la gerarchia dei componenti. | | font-size-body-s | 12px | Abbina font-size e line-height dello stesso ruolo. Le varianti Header e Box applicano la gerarchia dei componenti. | | font-size-heading-l | 20px | Abbina font-size e line-height dello stesso ruolo. Le varianti Header e Box applicano la gerarchia dei componenti. | | font-size-heading-m | 18px | Abbina font-size e line-height dello stesso ruolo. Le varianti Header e Box applicano la gerarchia dei componenti. | | font-size-heading-s | 16px | Abbina font-size e line-height dello stesso ruolo. Le varianti Header e Box applicano la gerarchia dei componenti. | | font-size-heading-xl | 24px | Abbina font-size e line-height dello stesso ruolo. Le varianti Header e Box applicano la gerarchia dei componenti. | | font-size-heading-xs | 14px | Abbina font-size e line-height dello stesso ruolo. Le varianti Header e Box applicano la gerarchia dei componenti. | | line-height-body-m | 20px | Abbina font-size e line-height dello stesso ruolo. Le varianti Header e Box applicano la gerarchia dei componenti. | | line-height-body-s | 16px | Abbina font-size e line-height dello stesso ruolo. Le varianti Header e Box applicano la gerarchia dei componenti. | | line-height-heading-l | 24px | Abbina font-size e line-height dello stesso ruolo. Le varianti Header e Box applicano la gerarchia dei componenti. | | line-height-heading-m | 22px | Abbina font-size e line-height dello stesso ruolo. Le varianti Header e Box applicano la gerarchia dei componenti. | | line-height-heading-s | 20px | Abbina font-size e line-height dello stesso ruolo. Le varianti Header e Box applicano la gerarchia dei componenti. | | line-height-heading-xl | 30px | Abbina font-size e line-height dello stesso ruolo. Le varianti Header e Box applicano la gerarchia dei componenti. | | line-height-heading-xs | 18px | Abbina font-size e line-height dello stesso ruolo. Le varianti Header e Box applicano la gerarchia dei componenti. | ### Spaziatura adattiva alla densità | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | space-scaled-xxxs | comfortable: 2px; compact: 0px | Usa il valore per la densità comoda o compatta in base alla densità attiva. Non ridimensionare il testo insieme a queste variazioni di spaziatura. | | space-scaled-xxs | comfortable: 4px; compact: 2px | Usa il valore per la densità comoda o compatta in base alla densità attiva. Non ridimensionare il testo insieme a queste variazioni di spaziatura. | | space-scaled-xs | comfortable: 8px; compact: 4px | Usa il valore per la densità comoda o compatta in base alla densità attiva. Non ridimensionare il testo insieme a queste variazioni di spaziatura. | | space-scaled-s | comfortable: 12px; compact: 8px | Usa il valore per la densità comoda o compatta in base alla densità attiva. Non ridimensionare il testo insieme a queste variazioni di spaziatura. | | space-scaled-m | comfortable: 16px; compact: 12px | Usa il valore per la densità comoda o compatta in base alla densità attiva. Non ridimensionare il testo insieme a queste variazioni di spaziatura. | | space-scaled-l | comfortable: 20px; compact: 16px | Usa il valore per la densità comoda o compatta in base alla densità attiva. Non ridimensionare il testo insieme a queste variazioni di spaziatura. | | space-scaled-xl | comfortable: 24px; compact: 20px | Usa il valore per la densità comoda o compatta in base alla densità attiva. Non ridimensionare il testo insieme a queste variazioni di spaziatura. | | space-scaled-xxl | comfortable: 32px; compact: 24px | Usa il valore per la densità comoda o compatta in base alla densità attiva. Non ridimensionare il testo insieme a queste variazioni di spaziatura. | | space-scaled-xxxl | comfortable: 40px; compact: 32px | Usa il valore per la densità comoda o compatta in base alla densità attiva. Non ridimensionare il testo insieme a queste variazioni di spaziatura. | ### Forma dei componenti | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | border-radius-container | 16px | Mantieni la forma del componente indicato. Il raggio di un pulsante non è un raggio universale per i contenitori. | | border-radius-button | 20px | Mantieni la forma del componente indicato. Il raggio di un pulsante non è un raggio universale per i contenitori. | | border-radius-input | 8px | Mantieni la forma del componente indicato. Il raggio di un pulsante non è un raggio universale per i contenitori. | | border-radius-alert | 12px | Mantieni la forma del componente indicato. Il raggio di un pulsante non è un raggio universale per i contenitori. | | border-radius-dropdown | 8px | Mantieni la forma del componente indicato. Il raggio di un pulsante non è un raggio universale per i contenitori. | | border-radius-card-embedded | 8px | Mantieni la forma del componente indicato. Il raggio di un pulsante non è un raggio universale per i contenitori. | ### Tempi di interazione | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | motion-duration-responsive | default: 115ms; disabled: 0ms | Con le animazioni disabilitate, il movimento nativo si riduce a zero. Evita di aggiungere una transizione non correlata alla stessa interazione. | | motion-duration-expressive | default: 165ms; disabled: 0ms | Con le animazioni disabilitate, il movimento nativo si riduce a zero. Evita di aggiungere una transizione non correlata alla stessa interazione. | | motion-duration-complex | default: 250ms; disabled: 0ms | Con le animazioni disabilitate, il movimento nativo si riduce a zero. Evita di aggiungere una transizione non correlata alla stessa interazione. | ### Composizione nativa API | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Wizard | activeStepIndex · onNavigate · onSubmit | Gestisci il passaggio corrente in React; convalida prima di accettare l’indice successivo richiesto. | | FormField | label · constraintText · errorText | Inserisci la regola di formato e il messaggio di errore accanto al campo del nome. | | Input | value · onChange({ detail }) | Leggi detail.value invece del target di un evento DOM. | | Select | selectedOption · options · onChange | Mantieni l’oggetto dell’opzione selezionata, compresi label e value. | | Container | header={
} | Raggruppa i campi di configurazione correlati senza inventare un nuovo sistema di schede. | | ColumnLayout | columns={2} · variant="text-grid" | Mostra metadati di revisione compatti con colonne adattive della libreria. | | SpaceBetween | size="l" | Usa la scala di spaziatura della libreria per separare i campi e le sezioni di revisione. | | applyMode | Mode.Light / Mode.Dark | Cambia la modalità visiva globale per i componenti nativi e i token semantici. | ## Guida completa del sistema di progettazione sistema di design AWS Cloudscape Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Architettura di configurazione del sistema di progettazione sistema di design AWS Cloudscape ### Adatta il flusso di lavoro a Wizard > L’esempio separa la configurazione dalla revisione. Wizard fornisce la navigazione tra i passaggi e le azioni; l’applicazione gestisce l’indice corrente, i valori dei campi, la regola di convalida e la conferma finale. Il lettore può tornare alla configurazione senza ricreare il modulo né perdere la capacità selezionata. È una soluzione più adatta che nascondere un intero flusso di lavoro articolato in più passaggi all’interno di una singola Card generica. ### Crea la struttura con i contenitori nativi Container, Header e SpaceBetween definiscono la sezione del modulo. h1 introduce l’operazione; h2 identifica il gruppo di impostazioni. Il testo esplicativo compare accanto al campo o al passaggio a cui si riferisce. La larghezza massima di 1200px e la spaziatura interna della pagina sono impostazioni esplicite dell’applicazione CSS, non token di layout esportati da Cloudscape. ## Token semantici e modalità visive del sistema di progettazione sistema di design AWS Cloudscape ### Scegli un ruolo prima di un valore Il riferimento distingue lo sfondo del layout, il contenuto dei contenitori, il testo del corpo, il testo interattivo e i messaggi di stato. I relativi valori non costituiscono una tavolozza uniforme. Per l’interfaccia personalizzata, importa il token denominato da @cloudscape-design/design-tokens invece di copiare un valore esadecimale chiaro in ogni stato. Il token definisce lo scopo; il valore può evolvere. ### Cambia modalità dalla libreria L’anteprima richiama applyMode con Mode.Light o Mode.Dark da global-styles. In questo modo aggiorna la modalità usata dai componenti, anziché sostituire colori CSS arbitrari. Una schermata di revisione scura conserva le stesse etichette, la capacità selezionata e lo stato di navigazione. Il JSON sorgente registra entrambi i valori nelle modalità chiara e scura, così da poterli esaminare separatamente. ## Tipografia e gerarchia delle intestazioni del sistema di progettazione sistema di design AWS Cloudscape ### Abbina i ruoli di carattere e interlinea Il riferimento visual-refresh body-m è 14px con un’interlinea di 20px. heading-xl è 24px con un’interlinea di 30px, heading-l è 20px con 24px e heading-m è 18px con 22px. Questi ruoli definiscono la gerarchia compatta del modulo; non sono dimensioni intercambiabili per titoli promozionali. ### Usa varianti semantiche dei componenti La variante Header h1 identifica Create a workspace. Le intestazioni dei contenitori usano h2 e la variante Box awsui-key-label conferisce alle etichette della revisione uno stile secondario coerente. I valori della revisione restano testo normale e leggibile. Non trasformare ogni etichetta di campo in un titolo solo per darle più risalto visivo. ## Campi controllati e composizione della revisione nel sistema di progettazione sistema di design AWS Cloudscape ### Comprendi il contratto degli eventi detail Input emette un evento il cui detail.value contiene il nuovo testo. Select emette detail.selectedOption, che è un oggetto opzione, non una semplice stringa. L’esempio completo memorizza l’oggetto e ne mostra label nella revisione. In questo modo si evita un comune errore d’integrazione per cui Select appare vuoto perché a selectedOption viene assegnato solo un identificatore. ### Mantieni le istruzioni insieme al campo FormField contiene l’etichetta Workspace name, il testo dei vincoli e il messaggio di errore. La regola di convalida consente da 3 a 30 lettere minuscole, numeri e trattini, iniziando con una lettera. Questa regola è una scelta dell’applicazione di esempio, non una regola di denominazione valida per tutti i servizi AWS. Anche la spiegazione della capacità precisa che i profili sono fittizi. - La regola sul formato del campo è specifica di questa applicazione di esempio. - Le opzioni di capacità non sono dichiarazioni sui prodotti o sui prezzi. - I componenti nativi gestiscono la presentazione; lo stato React contiene la configurazione. ## Densità e layout adattivo del sistema di progettazione sistema di design AWS Cloudscape ### Non trattare la modalità compatta come un livello di zoom I valori di spaziatura ridimensionati pubblicati variano in base alla densità. Per esempio, space-scaled-m è 16px nella modalità comoda e 12px in quella compatta, mentre space-scaled-l è rispettivamente 20px e 16px. Queste differenze comprimono il ritmo verticale senza ridefinire i contenuti né ridurre arbitrariamente il testo. I componenti nativi applicano le proprie regole di densità. ### Adatta le strutture dei passaggi e della revisione Wizard modifica la presentazione della navigazione in base allo spazio disponibile; ColumnLayout dispone i metadati della revisione in modo adattivo. Sotto i 600px, l’applicazione CSS riduce la spaziatura esterna. L’esempio non imposta in modo rigido la larghezza della navigazione tra i passaggi su desktop e, nella versione mobile, mantiene visibili le azioni Next, Previous e Confirm, che qui operano solo in locale. ## Convalida e conferma di Wizard nel sistema di progettazione sistema di design AWS Cloudscape ### Convalida prima di accettare la navigazione onNavigate riceve requestedStepIndex. Prima di passare alla revisione, l’applicazione controlla il nome e lascia invariato il passaggio se non è valido. La modifica del nome cancella l’errore, così il successivo invio può essere convalidato da zero. Tornando alle impostazioni, il nome e l’opzione selezionata vengono mantenuti. 1. Invia un nome non valido e resta nella configurazione. 2. Correggi il nome e scegli un profilo di capacità diverso. 3. Passa alla revisione e conferma entrambi i valori. 4. Usa Edit settings per tornare indietro senza perdere nessuno dei due valori. 5. Conferma in locale e riavvia l’esempio. ### Distingui una configurazione dal provisioning L’azione finale mostra un Alert locale di esito positivo e un riepilogo della configurazione. Non simula la creazione di una risorsa reale. In un’applicazione effettiva, mantieni l’azione di invio in sospeso durante il provisioning, distingui le richieste accettate dalle risorse create e consenti di recuperare da un errore senza perdere la configurazione. ## Accessibilità dei moduli nel sistema di progettazione sistema di design AWS Cloudscape ### Mantieni le etichette e i nomi della navigazione Wizard riceve navigationAriaLabel e le stringhe tradotte delle azioni. Ogni Input e Select è incluso in un FormField con etichetta. Alert comunica gli esiti non validi o positivi tramite la semantica nativa del componente. I vincoli visibili integrano l’etichetta del campo, senza sostituirla. ### Verifica la navigazione da tastiera nell’intero flusso Usa la tastiera per raggiungere il campo del nome, aprire il selettore della capacità, andare avanti, tornare indietro, modificare e confermare. La gestione nativa dello stato di focus è utile, ma la regola di convalida dei passaggi e il significato della conferma restano responsabilità dell’applicazione. Una libreria di componenti non può convalidare autonomamente una regola di business mancante. ## Installazione e limiti delle personalizzazioni del sistema di progettazione sistema di design AWS Cloudscape ### Installa insieme i pacchetti correlati L’implementazione importa i componenti dai rispettivi sottopercorsi dei pacchetti e carica global-styles una sola volta. design-tokens fornisce il riferimento per gli stili personalizzati. Il file entry React e il file CSS compatto forniti riproducono l’esempio interattivo in un’applicazione Vite React. Mantieni insieme versioni compatibili dei pacchetti Cloudscape. ### Usa l’esempio fornito come punto di partenza concreto Sostituisci i dati fittizi sulla capacità solo dopo aver definito il modello del servizio effettivo. Mantieni i contratti degli eventi e il passaggio di revisione, poi aggiungi l’invio asincrono e risposte di errore esplicite. Per qualsiasi elemento personalizzato, valuta prima l’uso di un componente Cloudscape esistente; solo in seguito, se necessario, introduci un elemento personalizzato utilizzando un token semantico appropriato. ## Sistema di design AWS Cloudscape Esempi di componenti del sistema di progettazione ### main.jsx — procedura guidata di configurazione completa Wizard, FormField, Select e metadati di revisione nativi, con navigazione controllata e conferma locale. ``` import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import Wizard from "@cloudscape-design/components/wizard"; import Container from "@cloudscape-design/components/container"; import Header from "@cloudscape-design/components/header"; import FormField from "@cloudscape-design/components/form-field"; import Input from "@cloudscape-design/components/input"; import Select from "@cloudscape-design/components/select"; import SpaceBetween from "@cloudscape-design/components/space-between"; import ColumnLayout from "@cloudscape-design/components/column-layout"; import Box from "@cloudscape-design/components/box"; import Button from "@cloudscape-design/components/button"; import Alert from "@cloudscape-design/components/alert"; import Toggle from "@cloudscape-design/components/toggle"; import { applyMode, Mode } from "@cloudscape-design/global-styles"; import "@cloudscape-design/global-styles/index.css"; import "./cloudscape.css"; const sizes = [ { label: "Development · 2 vCPU / 4 GiB", value: "dev" }, { label: "Standard · 4 vCPU / 8 GiB", value: "standard" }, { label: "Compute · 8 vCPU / 16 GiB", value: "compute" }, ]; function App() { const [name, setName] = useState("analytics-sandbox"), [size, setSize] = useState(sizes[0]), [step, setStep] = useState(0), [error, setError] = useState(""), [complete, setComplete] = useState(false), [dark, setDark] = useState(false); function next(index) { if (index > 0 && !/^[a-z][a-z0-9-]{2,29}$/.test(name)) { setError( "Use 3–30 lowercase letters, numbers or hyphens, starting with a letter.", ); return; } setError(""); setStep(index); } function reset() { setStep(0); setComplete(false); setError(""); setName("analytics-sandbox"); setSize(sizes[0]); } return (
CLOUDSCAPE · RESOURCE CONFIGURATION { setDark(detail.checked); applyMode(detail.checked ? Mode.Dark : Mode.Light); }} > Dark mode
Create a workspace
{complete ? ( The {name} recipe is ready for review. No cloud API was called and no resource was provisioned. Workspace recipe
}>
Name {name}
Capacity {size.label}
) : ( next(detail.requestedStepIndex)} onCancel={reset} onSubmit={() => setComplete(true)} i18nStrings={{ stepNumberLabel: (stepNumber) => `Step ${stepNumber}`, collapsedStepsLabel: (stepNumber, stepsCount) => `Step ${stepNumber} of ${stepsCount}`, skipToButtonLabel: (step) => `Skip to ${step.title}`, navigationAriaLabel: "Configuration steps", cancelButton: "Reset", previousButton: "Previous", nextButton: "Next", submitButton: "Confirm locally", optional: "optional", }} steps={[ { title: "Configure workspace", description: "Choose the identity and capacity.", content: ( Workspace settings} > { setName(detail.value); setError(""); }} />