main.jsx — 完整配置向导
使用原生 Wizard、FormField、Select 和审核元数据，并通过受控导航和本地确认进行管理。
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 />);
- 将此代码保存为 src/main.jsx。下一个代码块是导入的 src/cloudscape.css。
