Una guida alla configurazione di Cloudscape con token reali per l’aggiornamento visivo, spaziatura adattata alla densità, API controllate per i moduli e una procedura guidata funzionante in due passaggi per le risorse.
Guida OpenDesign8 capitoli50 voci di riferimentoGuida applicativa originale
01
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
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
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.
Invia un nome non valido e resta nella configurazione.
Correggi il nome e scegli un profilo di capacità diverso.
Passa alla revisione e conferma entrambi i valori.
Usa Edit settings per tornare indietro senza perdere nessuno dei due valori.
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
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.
jsx
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 (
<main className="awsui-typography cloudscape-example">
<div className="appearance">
<span>CLOUDSCAPE · RESOURCE CONFIGURATION</span>
<Toggle
checked={dark}
onChange={({ detail }) => {
setDark(detail.checked);
applyMode(detail.checked ? Mode.Dark : Mode.Light);
}}
>
Dark mode
</Toggle>
</div>
<Header
variant="h1"
description="Configure a fictional compute workspace. This example does not create a cloud resource."
>
Create a workspace
</Header>
<div className="wizard-content">
{complete ? (
<SpaceBetween size="l">
<Alert type="success" header="Configuration confirmed locally">
The {name} recipe is ready for review. No cloud API was called and
no resource was provisioned.
</Alert>
<Container header={<Header variant="h2">Workspace recipe</Header>}>
<ColumnLayout columns={2} variant="text-grid">
<div>
<Box variant="awsui-key-label">Name</Box>
{name}
</div>
<div>
<Box variant="awsui-key-label">Capacity</Box>
{size.label}
</div>
</ColumnLayout>
</Container>
<Button onClick={reset}>Start another example</Button>
</SpaceBetween>
) : (
<Wizard
activeStepIndex={step}
onNavigate={({ detail }) => 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: (
<Container
header={<Header variant="h2">Workspace settings</Header>}
>
<SpaceBetween size="l">
<FormField
label="Workspace name"
constraintText="3–30 characters; lowercase letters, numbers and hyphens."
errorText={error}
>
<Input
value={name}
onChange={({ detail }) => {
setName(detail.value);
setError("");
}}
/>
</FormField>
<FormField
label="Capacity profile"
description="These profiles are sample application data, not real cloud products or prices."
>
<Select
selectedOption={size}
onChange={({ detail }) =>
setSize(detail.selectedOption)
}
options={sizes}
/>
</FormField>
</SpaceBetween>
</Container>
),
},
{
title: "Review configuration",
description:
"Check the values before confirming the local example.",
content: (
<SpaceBetween size="l">
<Container
header={
<Header
variant="h2"
actions={
<Button onClick={() => setStep(0)}>
Edit settings
</Button>
}
>
Workspace settings
</Header>
}
>
<ColumnLayout columns={2} variant="text-grid">
<div>
<Box variant="awsui-key-label">Workspace name</Box>
{name}
</div>
<div>
<Box variant="awsui-key-label">Capacity profile</Box>
{size.label}
</div>
</ColumnLayout>
</Container>
<Alert type="info">
Confirmation changes the preview only. Production
provisioning would require a real service, permissions and
a verified response.
</Alert>
</SpaceBetween>
),
},
]}
/>
)}
</div>
<footer>
Native Cloudscape components 3.0.1390 · configuration, validation,
review and local confirmation.
</footer>
</main>
);
}
createRoot(document.getElementById("root")).render(<App />);
Non sovrascrivere i nomi delle classi dei componenti nativi con questo foglio di stile dell’applicazione.
04
Sistema di design AWS Cloudscape Configurazione dell’agente per il sistema di progettazione
Punto di partenza per l’implementazione
L’esempio nativo visualizzato è stato incluso con React 18.3.1. Usa una versione di Node.js supportata dalla versione di Vite che installi; mantieni le versioni utilizzate dal file lock dell’applicazione.
sh
npm create vite@latest cloudscape-workspace -- --template react
cd cloudscape-workspace
npm install
npm install [email protected][email protected] @cloudscape-design/[email protected] @cloudscape-design/[email protected] @cloudscape-design/global-styles
# Replace src/main.jsx and add src/cloudscape.css from the full examples.
npm run dev
Un prompt per il tuo progetto
Prompt per l’agente
Crea un flusso di configurazione delle risorse con Cloudscape. Usa il codice nativo fornito per Wizard/Container/FormField/Input/Select e i ruoli dei token di aggiornamento visivo. Mantieni i valori dei campi tra i passaggi, convalida prima di navigare e mostra una revisione completa. Considera i profili di capacità di esempio come segnaposto per il mio modello di dominio, non come prodotti cloud reali. Integra il provisioning solo dopo aver ricevuto un API; distingui tra risultati in sospeso, non riusciti e confermati.
05
Sistema di design AWS Cloudscape Fonti e ambito del sistema di progettazione
Guida OpenDesign ed esempio originale di configurazione dell’area di lavoro locale con componenti Cloudscape nativi 3.0.1390. I profili di capacità sono dati fittizi dell’applicazione. Non sono coinvolti account cloud, API di provisioning né prezzi di servizi effettivi.
