# Steps

步骤条

## Basic

```tsx
import React from 'react'
import { Steps, Step, Button } from 'react-icecream'

export default () => {
  const [current, setCurrent] = React.useState(1)
  const handleChange = (nextStep) => {
    setCurrent(nextStep > 2 ? 0 : nextStep)
  }

  return (
    <>
      <Steps current={current} style={{ marginBottom: 15 }} onChange={handleChange}>
        <Step title="第一步" description="购买对象存储 Kodo" />
        <Step title="第二步" description="购买 CDN" />
        <Step title="第三步" description="购买云主机" />
      </Steps>
      <Button type="primary" onClick={() => handleChange(current + 1)} style={{ marginLeft: 32}}>下一步</Button>
    </>
  )
}
```

## Status

```tsx
import React from 'react'
import { Steps, Step } from 'react-icecream'

export default () => {
  return (
    <Steps current={1} status="error">
      <Step title="第一步" description="购买对象存储 Kodo" />
      <Step title="第二步" description="购买 CDN" />
      <Step title="第三步" description="购买云主机" />
    </Steps>
  )
}
```

## Icon

```tsx
import React from 'react'
import { Steps, Step } from 'react-icecream'

export default () => {
  return (
    <Steps current={1}>
      <Step icon="壹" title="第一步" description="购买对象存储 Kodo" />
      <Step icon={<span>贰</span>} title="第二步" description="购买 CDN" />
      <Step icon="叁" title="第三步" description="购买云主机" />
    </Steps>
  )
}
```

## labelPlacement

```tsx
import React from 'react'
import { Steps, Step } from 'react-icecream'

export default () => {
  return (
    <Steps current={1} labelPlacement="right">
      <Step title="第一步" />
      <Step title="第二步" />
      <Step title="第三步" />
    </Steps>
  )
}
```

## Vertical

```tsx
import React from 'react'
import { Steps, Step } from 'react-icecream'

export default () => {
  return (
    <Steps direction="vertical">
      <Step title="第一步" description="七牛云海量存储系统（Kodo）是自主研发的非结构化数据存储管理平台，支持中心和边缘存储。 平台经过多年大规模用户验证已跻身先进技术行列，并广泛应用于海量数据管理的各类场景。" />
      <Step title="第二步" description="购买 CDN" />
      <Step title="第三步" description="购买云主机" />
    </Steps>
  )
}
```

## Steps API
<API></API>

## Step API
<API src="./Item.tsx"></API>