Steps 步骤条

使用场景

主要用于分布表单场景，告知用户总的步骤数量及每步所需填写的内容，为用户建立心理预期，评估表单填写的难度及所需时间。

示例

基本示例

Steps 为受控组件，用户可以通过 step={number} 进行控制

1. 基本信息
   首先做这件事首先做这件事首先做这件事首先做这件事首先做这件事首先做这件事 首先做这件事 首先做这件事 首先做这件事
2. 店仓范围
   其次做这件事其次做这件事其次做这件事其次做这件事其次做这件事其次做这件事 其次做这件事
3. 合同条款
   然后做这件事
4. 附加信息
   最后做这件事

inline

() => { const [step, setStep] = useState(2); const steps = [ { title: '基本信息', children: ( <Box> 首先做这件事首先做这件事首先做这件事首先做这件事首先做这件事首先做这件事 首先做这件事 首先做这件事 首先做这件事 </Box> ), }, { title: '店仓范围', children: <Box>其次做这件事其次做这件事其次做这件事其次做这件事其次做这件事其次做这件事 其次做这件事</Box>, }, { title: '合同条款', children: <Box>然后做这件事</Box> }, { title: '附加信息', children: <Box>最后做这件事</Box> }, ]; return <Steps step={step} steps={steps} onChange={(val) => setStep(val)} />; }

() => {
  const [step, setStep] = useState(2);
  const steps = [
    {
      title: '基本信息',
      children: (
        <Box>
          首先做这件事首先做这件事首先做这件事首先做这件事首先做这件事首先做这件事 首先做这件事 首先做这件事
          首先做这件事
        </Box>
      ),
    },
    {
      title: '店仓范围',
      children: <Box>其次做这件事其次做这件事其次做这件事其次做这件事其次做这件事其次做这件事 其次做这件事</Box>,
    },
    { title: '合同条款', children: <Box>然后做这件事</Box> },
    { title: '附加信息', children: <Box>最后做这件事</Box> },
  ];
  return <Steps step={step} steps={steps} onChange={(val) => setStep(val)} />;
}

状态

1. 基本信息
2. 店仓范围
3. 合同条款
4. 合同条款
5. 附加信息

inline

() => { const steps = [ { title: '基本信息', status: 'complete' }, { title: '店仓范围', status: 'complete' }, { title: '合同条款', status: 'error' }, { title: '合同条款' }, { title: '附加信息' }, ]; return <Steps steps={steps} onChange={console.log} />; }

() => {
  const steps = [
    { title: '基本信息', status: 'complete' },
    { title: '店仓范围', status: 'complete' },
    { title: '合同条款', status: 'error' },
    { title: '合同条款' },
    { title: '附加信息' },
  ];

  return <Steps steps={steps} onChange={console.log} />;
}

垂直方向

通过 direction="column" 设置 Steps 为水平方向

1. 基本信息
   首先做这件事首先做这件事首先做这件事首先做这件事首先做这件事首先做这件事 首先做这件事 首先做这件事 首先做这件事
2. 店仓范围
   其次做这件事其次做这件事其次做这件事其次做这件事其次做这件事其次做这件事 其次做这件事
3. 合同条款
   然后做这件事
4. 附加信息
   最后做这件事

inline

() => { const [step, setStep] = useState(2); const steps = [ { title: '基本信息', children: ( <Box> 首先做这件事首先做这件事首先做这件事首先做这件事首先做这件事首先做这件事 首先做这件事 首先做这件事 首先做这件事 </Box> ), }, { title: '店仓范围', children: <Box>其次做这件事其次做这件事其次做这件事其次做这件事其次做这件事其次做这件事 其次做这件事</Box>, }, { title: '合同条款', children: <Box>然后做这件事</Box> }, { title: '附加信息', children: <Box>最后做这件事</Box> }, ]; return <Steps direction="column" step={step} steps={steps} onChange={(val) => setStep(val)} />; }

() => {
  const [step, setStep] = useState(2);
  const steps = [
    {
      title: '基本信息',
      children: (
        <Box>
          首先做这件事首先做这件事首先做这件事首先做这件事首先做这件事首先做这件事 首先做这件事 首先做这件事
          首先做这件事
        </Box>
      ),
    },
    {
      title: '店仓范围',
      children: <Box>其次做这件事其次做这件事其次做这件事其次做这件事其次做这件事其次做这件事 其次做这件事</Box>,
    },
    { title: '合同条款', children: <Box>然后做这件事</Box> },
    { title: '附加信息', children: <Box>最后做这件事</Box> },
  ];
  return <Steps direction="column" step={step} steps={steps} onChange={(val) => setStep(val)} />;
}

API

Step

字段	描述
direction	"column" | "row" 方向
steps*	StepProps[] 步骤列表
step	number 当前步骤
onChange	FormControlOnChangeHandler<number> 步骤变化时的回调