Question

我使用AntD库，并想使用 Steps 组件。我有垂直对齐方式，它们都很好用。但是，我想删除选中标记图标，仅显示数字。我想将其用作逐步指南，不需要选中标记图标。我希望当前的活动图标保持现状，而不是active的其他图标作为当前尚未完成的步骤。有谁知道该怎么做？

我有一个草图和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"}
/>

在下一个示例中，请注意，步骤“完成” 移至下一步后仍保留wait，其他步骤将变为finish状态。

您可以使用以下值控制状态：

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;

此外，您始终可以使用接受icon的{{1}}属性来进行自定义步骤，例如，当前步骤只是圆圈ReactNode，它们会更改其类型/图标，请参阅{ {3}}，以获取更多信息。

Answer 2

我有一个解决方法.....

您可以使用public class ExpandableListAdapter extends BaseExpandableListAdapter { private Context mContext; private List<ExpandedMenuModel> mListDataHeader; private HashMap<ExpandedMenuModel, List<String>> mListDataChild; ExpandableListView expandList; public ExpandableListAdapter(Context context, List<ExpandedMenuModel> listDataHeader, HashMap<ExpandedMenuModel, List<String>> listChildData, ExpandableListView mView) { this.mContext = context; this.mListDataHeader = listDataHeader; this.mListDataChild = listChildData; this.expandList = mView; }道具来显示步数。像这样...

icon

代码沙箱：https://codesandbox.io/s/ant-design-steps-with-form-checking-8fi3t

React Ant设计步骤-否“检查图标”

2 个答案: