test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-15 17:31:25 +08:00
Code Issues Actions 24 Packages Projects Releases Wiki Activity
f07e538205
ant-design/components/steps/demo/nav.md
PCCCCCCC f4411d9393
Refactor:Component Steps Less to cssInJs (#35058) 
* refactor: Steps cssInJs add basic structure

* refactor: change Component Steps less into cssInJs

* refactor: ♻️ steps cssInJs code formated

* style: 💄 change Steps cssinjs left and right into Logical Properties

* style: 💄 steps cssinjs add FIXME for number hardcode

* style: 💄 steps cssinjs dismiss useless rtl style

* style: 💄 step cssinjs fix the 'not compatible with RTL mode' warning and fix the style in RTL mode

* style: code formated for FIXME

* style: revert the change about _skip_check_

* style: step cssinjs margin/padding used with Logical properties

* ci: fix lint check

* style: fix the style on RTL

* style: try fix the step subtitle order on RTL mode

* style: optimization the style on RTL and dismiss duplicate styles with logical properties
2022-04-19 11:28:06 +08:00

2.3 KiB
Raw Blame History

order title
11
zh-CN en-US
导航步骤 Navigation Steps

zh-CN

导航类型的步骤条。

en-US

Navigation steps.

import { Steps } from 'antd';

const { Step } = Steps;

class Demo extends React.Component {
  state = {
    current: 0,
  };

  onChange = current => {
    console.log('onChange:', current);
    this.setState({ current });
  };

  render() {
    const { current } = this.state;
    return (
      <>
        <Steps
          type="navigation"
          size="small"
          current={current}
          onChange={this.onChange}
          className="site-navigation-steps"
        >
          <Step
            title="Step 1"
            subTitle="00:00:05"
            status="finish"
            description="This is a description."
          />
          <Step
            title="Step 2"
            subTitle="00:01:02"
            status="process"
            description="This is a description."
          />
          <Step
            title="Step 3"
            subTitle="waiting for longlong time"
            status="wait"
            description="This is a description."
          />
        </Steps>
        <Steps
          type="navigation"
          current={current}
          onChange={this.onChange}
          className="site-navigation-steps"
        >
          <Step status="finish" title="Step 1" />
          <Step status="process" title="Step 2" />
          <Step status="wait" title="Step 3" />
          <Step status="wait" title="Step 4" />
        </Steps>
        <Steps
          type="navigation"
          size="small"
          current={current}
          onChange={this.onChange}
          className="site-navigation-steps"
        >
          <Step status="finish" title="finish 1" />
          <Step status="finish" title="finish 2" />
          <Step status="process" title="current process" />
          <Step status="wait" title="wait" disabled />
        </Steps>
      </>
    );
  }
}

export default Demo;

[data-theme='compact'] .site-navigation-steps.ant-steps.ant-steps-navigation,
.site-navigation-steps.ant-steps.ant-steps-navigation {
  margin-bottom: 60px;
  box-shadow: 0px -1px 0 0 #e8e8e8 inset;
}