• Steps 步骤条

    引导用户按照流程完成任务的导航条。

    何时使用

    当任务复杂或者存在先后关系时,将其分解成一系列步骤,从而简化任务。

    代码演示

    简单的步骤条。
    expand code expand code
    import { Steps } from 'choerodon-ui';
    const Step = Steps.Step;
    
    ReactDOM.render(
      <Steps current={1}>
        <Step title="Finished" description="This is a description." />
        <Step title="In Progress" description="This is a description." />
        <Step title="Waiting" description="This is a description." />
      </Steps>,
      mountNode);
    
    迷你版的步骤条,通过设置 <Steps size="small"> 启用.
    expand code expand code
    import { Steps } from 'choerodon-ui';
    const Step = Steps.Step;
    
    ReactDOM.render(
      <Steps size="small" current={1}>
        <Step title="Finished" />
        <Step title="In Progress" />
        <Step title="Waiting" />
      </Steps>,
      mountNode);
    
    简单的步骤条。
    expand code expand code
    import { Steps, Icon } from 'choerodon-ui';
    const Step = Steps.Step;
    
    ReactDOM.render(
      <Steps>
        <Step status="finish" title="Login" icon={<Icon type="person_outline" />} />
        <Step status="finish" title="Verification" icon={<Icon type="panorama_vertical" />} />
        <Step status="process" title="Pay" icon={<Icon type="schedule" />} />
        <Step status="wait" title="Done" icon={<Icon type="tag_faces" />} />
      </Steps>,
      mountNode);
    
    通常配合内容及按钮使用,表示一个流程的处理进度。
    expand code expand code
    import { Steps, Button, message } from 'choerodon-ui';
    const Step = Steps.Step;
    
    const steps = [{
      title: 'First',
      content: 'First-content',
    }, {
      title: 'Second',
      content: 'Second-content',
    }, {
      title: 'Last',
      content: 'Last-content',
    }];
    
    class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          current: 0,
        };
      }
    
      next() {
        const current = this.state.current + 1;
        this.setState({ current });
      }
    
      prev() {
        const current = this.state.current - 1;
        this.setState({ current });
      }
    
      render() {
        const { current } = this.state;
        return (
          <div>
            <Steps current={current}>
              {steps.map(item => <Step key={item.title} title={item.title} />)}
            </Steps>
            <div className="steps-content">{steps[this.state.current].content}</div>
            <div className="steps-action">
              {
                this.state.current < steps.length - 1
                && <Button type="primary" onClick={() => this.next()}>Next</Button>
              }
              {
                this.state.current === steps.length - 1
                && <Button type="primary" onClick={() => message.success('Processing complete!')}>Done</Button>
              }
              {
                this.state.current > 0
                && (
                  <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
                    Previous
                  </Button>)
              }
            </div>
          </div>
        );
      }
    }
    
    ReactDOM.render(<App />, mountNode);
    
    简单的竖直方向的步骤条。
    expand code expand code
    import { Steps } from 'choerodon-ui';
    const Step = Steps.Step;
    
    ReactDOM.render(
      <Steps direction="vertical" current={1}>
        <Step title="Finished" description="This is a description." />
        <Step title="In Progress" description="This is a description." />
        <Step title="Waiting" description="This is a description." />
      </Steps>,
      mountNode);
    
    简单的竖直方向的小型步骤条。
    expand code expand code
    import { Steps } from 'choerodon-ui';
    const Step = Steps.Step;
    
    ReactDOM.render(
      <Steps direction="vertical" size="small" current={1}>
        <Step title="Finished" description="This is a description." />
        <Step title="In Progress" description="This is a description." />
        <Step title="Waiting" description="This is a description." />
      </Steps>,
      mountNode);
    
    简单的步骤条。
    expand code expand code
    import { Steps } from 'choerodon-ui';
    const Step = Steps.Step;
    
    ReactDOM.render(
      <Steps current={1} status="error">
        <Step title="Finished" description="This is a description" />
        <Step title="In Process" description="This is a description" />
        <Step title="Waiting" description="This is a description" />
      </Steps>,
      mountNode);
    
    包含步骤点的进度条。
    expand code expand code
    import { Steps } from 'choerodon-ui';
    const Step = Steps.Step;
    
    ReactDOM.render(
      <Steps progressDot current={1}>
        <Step title="Finished" description="This is a description." />
        <Step title="In Progress" description="This is a description." />
        <Step title="Waiting" description="This is a description." />
      </Steps>,
      mountNode);
    
    为点状步骤条增加自定义展示。
    expand code expand code
    import { Steps, Popover } from 'choerodon-ui';
    const Step = Steps.Step;
    
    const customDot = (dot, { status, index }) => (
      <Popover content={<span>step {index} status: {status}</span>}>
        {dot}
      </Popover>
    );
    
    ReactDOM.render(
      <Steps current={1} progressDot={customDot}>
        <Step title="Finished" description="You can hover on the dot." />
        <Step title="In Progress" description="You can hover on the dot." />
        <Step title="Waiting" description="You can hover on the dot." />
        <Step title="Waiting" description="You can hover on the dot." />
      </Steps>,
      mountNode);
    

    API

    <Steps>
      <Step title="第一步" />
      <Step title="第二步" />
      <Step title="第三步" />
    </Steps>
    

    Steps

    整体步骤条。

    参数 说明 类型 默认值
    current 指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 status 属性覆盖状态 number 0
    direction 指定步骤条方向。目前支持水平(horizontal)和竖直(vertical)两种方向 string horizontal
    progressDot 点状步骤条,可以设置为一个 function Boolean or (iconDot, {index, status, title, description}) => ReactNode false
    size 指定大小,目前支持普通(default)和迷你(small string default
    status 指定当前步骤的状态,可选 wait process finish error string process

    Steps.Step

    步骤条内的每一个步骤。

    参数 说明 类型 默认值
    description 步骤的详情描述,可选 string|ReactNode -
    icon 步骤图标的类型,可选 string|ReactNode -
    status 指定状态。当不配置该属性时,会使用 Steps 的 current 来自动指定状态。可选:wait process finish error string wait
    title 标题 string|ReactNode -