Files
react-test/docs/data/joy/components/stepper/VerticalStepper.tsx
how2ice 005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
init project
2025-12-12 14:26:25 +09:00

31 lines
908 B
TypeScript

import Box from '@mui/joy/Box';
import Stepper from '@mui/joy/Stepper';
import Step from '@mui/joy/Step';
import StepIndicator from '@mui/joy/StepIndicator';
export default function VerticalStepper() {
return (
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
<Stepper orientation="vertical" sx={{ width: 200 }}>
<Step
indicator={
<StepIndicator variant="solid" color="neutral">
1
</StepIndicator>
}
>
Order placed
</Step>
<Step indicator={<StepIndicator>2</StepIndicator>}>In review</Step>
<Step indicator={<StepIndicator>3</StepIndicator>}>Approved</Step>
</Stepper>
<Stepper orientation="vertical" sx={{ width: 200 }}>
<Step>Order placed</Step>
<Step>In review</Step>
<Step>Approved</Step>
</Stepper>
</Box>
);
}