ant-design/components/steps/demo/steps-in-steps.md

order	debug	title
99	true	zh-CN en-US Steps 嵌套 Steps Steps inside Steps

zh-CN

测试 Steps 嵌套 Steps 的样式。

en-US

Test style of Steps inside Steps.

import type { StepsProps } from 'antd';
import { Card, Radio, Steps } from 'antd';
import React, { useState } from 'react';

const { Step } = Steps;

const App: React.FC = () => {
  const [size, setSize] = useState<StepsProps['size']>('default');

  const horizontalSteps = (
    <Card>
      <Steps size={size}>
        <Step title="Finished" description="This is a description." />
        <Step title="In Progress" description="This is a description." />
        <Step title="Waiting" description="This is a description." />
      </Steps>
    </Card>
  );

  return (
    <>
      <Radio.Group
        style={{ marginBottom: 16 }}
        value={size}
        onChange={e => setSize(e.target.value)}
      >
        <Radio value="small">Small</Radio>
        <Radio value="default">Default</Radio>
      </Radio.Group>
      <Steps size={size} direction="vertical">
        <Step title="Finished" description={horizontalSteps} />
        <Step title="In Progress" description="This is a description." />
        <Step title="Waiting" description="This is a description." />
      </Steps>
    </>
  );
};

export default App;