## 简介

步骤条常用于需要分步操作或展示信息的场景，用户可以清晰地知道当前操作的进程或所在环节。

## 示例

```tsx
import React, { useState, useCallback } from 'react';
import { Step } from '@alicloud/console-components';

const list = [
  { title: '已完成步骤', key: 1 },
  { title: '当前步骤', key: 2 },
  { title: '未完成最后步骤', key: 3 },
];

export default () => {
  const [currentStep, setCurrentStep] = useState(1);

  const stepClick = useCallback((index) => {
    setCurrentStep(index);
  }, []);

  const steps = list.map((item) => (
    <Step.Item
      key={item.key}
      title={item.title}
      onClick={(index) => stepClick(index)}
    />
  ));
  return (
    <div>
      <Step current={currentStep} shape="circle" labelPlacement="hoz">
        {steps}
      </Step>
    </div>
  );
};

export const meta = {
  title: '默认',
  describe: '基本使用方式。',
};

```

```tsx
import React, { useState, useCallback } from 'react';
import { Step } from '@alicloud/console-components';

export default () => {
  const [currentStep, setCurrentStep] = useState(1);

  const stepClick = useCallback((index) => {
    setCurrentStep(index);
  }, []);

  return (
    <div>
      <Step
        current={currentStep}
        animation={false}
        shape="circle"
        labelPlacement="hoz"
        style={{ marginBottom: '32px' }}
      >
        <Step.Item
          title="已完成步骤"
          icon="sub_account"
          onClick={(index) => stepClick(index)}
        />
        <Step.Item
          title="当前步骤"
          icon="sub_account"
          onClick={(index) => stepClick(index)}
        />
        <Step.Item
          title="未完成最后步骤"
          icon="sub_account"
          onClick={(index) => stepClick(index)}
        />
      </Step>
      <Step
        current={currentStep}
        animation={false}
        shape="circle"
        labelPlacement="hoz"
      >
        <Step.Item
          title="已完成步骤"
          icon="checkmark"
          onClick={(index) => stepClick(index)}
        />
        <Step.Item
          title="当前步骤"
          percent={75}
          onClick={(index) => stepClick(index)}
        />
        <Step.Item
          title="未完成最后步骤"
          onClick={(index) => stepClick(index)}
        />
      </Step>
    </div>
  );
};

export const meta = {
  title: '特殊样式',
  describe: '设置icon属性，添加自定义图标。',
};

```

## API

### Step

| 参数           | 说明                                                                                                                                                                                                                                          | 类型                                                                                                                      | 默认值   | 是否必填 |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------- | -------- |
| current        | 当前步骤                                                                                                                                                                                                                                      | number                                                                                                                    | 0        |          |
| shape          | 类型                                                                                                                                                                                                                                          | StepShape                                                                                                                 | 'circle' |          |
| direction      | 展示方向                                                                                                                                                                                                                                      | StepDirection                                                                                                             | 'hoz'    |          |
| labelPlacement | 横向布局时的内容排列方式                                                                                                                                                                                                                      | StepDirection                                                                                                             | 'ver'    |          |
| readOnly       | 是否只读模式                                                                                                                                                                                                                                  | boolean                                                                                                                   | -        |          |
| animation      | 是否开启动效                                                                                                                                                                                                                                  | boolean                                                                                                                   | true     |          |
| itemRender     | 自定义渲染节点<br/><br/>**签名**:<br/>**参数**:<br/>*index*: 节点索引<br/>*status*: 节点状态<br/>*title*: 节点标题，仅在 `shape='circle'` 时会传递<br/>*content*: 节点内容，仅在 `shape='circle'` 时会传递<br/>**返回值**:<br/>节点的渲染结果 | (<br/> index: number,<br/> status: StepStatus,<br/> title?: ReactNode,<br/> content?: ReactNode<br/> ) => React.ReactNode | -        |          |
| stretch        | 宽度是否横向拉伸                                                                                                                                                                                                                              | boolean                                                                                                                   | false    |          |

### Step.Item

| 参数       | 说明                                                                                                                                                                                                                                                                                | 类型                                                                                                                                  | 默认值 | 是否必填 |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- |
| status     | 步骤的状态，如不传，会根据外层的 Step 的 current 属性生成                                                                                                                                                                                                                           | StepStatus                                                                                                                            | -      |          |
| title      | 标题                                                                                                                                                                                                                                                                                | React.ReactNode                                                                                                                       | -      |          |
| icon       | 图标                                                                                                                                                                                                                                                                                | string                                                                                                                                | -      |          |
| content    | 内容填充，shape 为 arrow 时无效                                                                                                                                                                                                                                                     | React.ReactNode                                                                                                                       | -      |          |
| itemRender | StepItem 的自定义渲染，会覆盖父节点设置的 itemRender<br/><br/>**签名**:<br/>**参数**:<br/>*index*: 节点索引<br/>*status*: 节点状态<br/>*title*: 节点标题，仅在 `shape='circle'` 时会传递<br/>*content*: 节点内容，仅在 `shape='circle'` 时会传递<br/>**返回值**:<br/>节点的渲染结果 | (<br/> index: number,<br/> status: StepStatus,<br/> title?: React.ReactNode,<br/> content?: React.ReactNode<br/> ) => React.ReactNode | -      |          |
| percent    | 百分比                                                                                                                                                                                                                                                                              | number                                                                                                                                | -      |          |
| disabled   | 是否禁用                                                                                                                                                                                                                                                                            | boolean                                                                                                                               | -      |          |
| onClick    | 点击步骤时的回调<br/><br/>**签名**:<br/>**参数**:<br/>*index*: 节点索引                                                                                                                                                                                                             | (index: number) => unknown                                                                                                            | -      |          |

### StepDirection

```typescript
export type StepDirection = 'hoz' | 'ver';
```

### StepStatus

```typescript
export type StepStatus = 'wait' | 'process' | 'finish';
```

### StepShape

```typescript
export type StepShape = 'circle' | 'arrow' | 'dot';
```