javascript - React Ant 设计步骤 -- NO 'Check Icon'

Question

我使用 AntD 库并想使用 Steps 组件。我有垂直对齐方式，一切都很好。不过，我想删除复选标记图标，只显示数字。我想将其用作分步指南，不需要复选标记图标。我希望事件图标保持现在的状态，而其他未事件 的图标作为当前未完成 的步骤。有谁知道如何做到这一点？

我有草图和some code .

在此感谢您的帮助!

已经搜索了官方文档和这里，但找不到答案。

---

我在 Dennis Vash 的帮助下得出的解决方案如下。如果其他人也需要，我只是将其张贴在这里。

Answer 1

您需要控制 Step's property status ，例如:

<Step
  title="Finished"
  description="This is a description."
  status={current === 0 ? "current" : current > 0 ? "wait" : "process"}
/>

请注意在下一个示例中，该步骤“完成”在移动到下一步后仍然是等待，其他步骤将更改为完成状态。

您可以使用下一个值控制状态:

current wait process finish error

class Main extends React.Component {
  state = { current: 0 };
  render() {
    const { current } = this.state;
    return (
      <div>
        <Steps direction="vertical" current={current}>
          <Step
            title="Finished"
            description="This is a description."
            status={
              current === 0 ? 'current' : current > 0 ? 'wait' : 'process'
            }
          />
          <Step title="In Progress" description="This is a description." />
          <Step title="Waiting" description="This is a description." />
        </Steps>
        <Button onClick={() => this.setState({ current: current - 1 })}>
          Prev
        </Button>
        <Button onClick={() => this.setState({ current: current + 1 })}>
          Next
        </Button>
      </div>
    );
  }
}

export default Main;

此外，您始终可以使用接受 ReactNode 的 icon 属性自定义步骤，例如，当前步骤只是圆圈 Button更改其类型/图标，请参阅 Button API了解更多信息。