CODEWITHSUNDEEP
reactjsantd
user578219
user578219

Reputation: 617

Change behavior of Steps React component from Ant Design(https://ant.design/components/steps/)

As in the link example, I would like to change the behavior of Steps react component from ANT design to just color and select(highight) only on the step that is click(as oppose to now it colors all the previous steps also)

Upvotes: 4

Views: 2605

Answers (2)

dimitrisli
dimitrisli

Reputation: 21401

You have to make use of the status prop in Step.

Documentation

Example in CodeSandbox

Intead of:

  <Steps current="2">
     <Step title="INSTRUCTIONS" />
     <Step title="REGISTRATION" />
     <Step title="VERIFICATION" />
  </Steps>

enter image description here

use status wait on previous steps:

  <Steps current="2">
     <Step status="wait" title="INSTRUCTIONS" />
     <Step title="REGISTRATION" />
     <Step title="VERIFICATION" />
  </Steps>

enter image description here

Upvotes: 4

Mobeen
Mobeen

Reputation: 985

There is a prop available for status in Step component. It overrides highlight by current variable. You can use that. E.g:

  <Steps current={this.state.current} progressDot={customDot}>
    <Step
      title="Finished"
      status={0 < this.state.current ? "wait" : null}
      description="You can hover on the dot."
    />
    <Step
      title="In Progress"
      status={1 < this.state.current ? "wait" : null}
      description="You can hover on the dot."
    />
    <Step
      title="Waiting"
      status={2 < this.state.current ? "wait" : null}
      description="You can hover on the dot."
    />
    <Step
      title="Start"
      status={3 < this.state.current ? "wait" : null}
      description="You can hover on the dot."
    />
  </Steps>,
);

Upvotes: 2

Related Questions