Steps 步骤条

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

何时使用

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

代码演示

基本用法

简单的步骤条。

import React from 'react';
import ReactDOM from 'react-dom';
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>,
  document.getElementById('container'),
);
​

迷你版

迷你版的步骤条，通过设置 <Steps size="small"> 启用.

import React from 'react';
import ReactDOM from 'react-dom';
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>,
  document.getElementById('container'),
);
​

带图标的步骤条

通过设置 Steps.Step 的 icon 属性，可以启用自定义图标。

import React from 'react';
import ReactDOM from 'react-dom';
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>,
  document.getElementById('container'),
);
​

步骤切换

通常配合内容及按钮使用，表示一个流程的处理进度。

​
import React from 'react';
import ReactDOM from 'react-dom';
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 (

竖直方向的步骤条

简单的竖直方向的步骤条。

import React from 'react';
import ReactDOM from 'react-dom';
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>,
  document.getElementById('container'),
);
​

竖直方向的小型步骤条

简单的竖直方向的小型步骤条。

import React from 'react';
import ReactDOM from 'react-dom';
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>,
  document.getElementById('container'),
);
​

步骤运行错误

使用 Steps 的 status 属性来指定当前步骤的状态。

import React from 'react';
import ReactDOM from 'react-dom';
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>,
  document.getElementById('container'),
);
​

点状步骤条

包含步骤点的进度条。

import React from 'react';
import ReactDOM from 'react-dom';
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>,
  document.getElementById('container'),
);
​

自定义点状步骤条

为点状步骤条增加自定义展示。

import React from 'react';
import ReactDOM from 'react-dom';
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>,
  document.getElementById('container'),
);
​

API

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

Steps

整体步骤条。

Steps.Step

步骤条内的每一个步骤。