cnd-components-mcp/componentData/components/Step/examples.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

## 示例
```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 (
    &lt;div&gt;
      &lt;Step current={currentStep} shape="circle" labelPlacement="hoz"&gt;
        {steps}
      &lt;/Step&gt;
    &lt;/div&gt;
  );
};

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 (
    &lt;div&gt;
      <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)}
        />
      &lt;/Step&gt;
      <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)}
        />
      &lt;/Step&gt;
    &lt;/div&gt;
  );
};

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

```