<script>
import CustomizedProgressDot from './customized-progress-dot'
import Error from './error'
import Icon from './icon'
import ProgressDot from './progress-dot'
import Simple from './simple'
import SmallSize from './small-size'
import StepNext from './step-next'
import VerticalSmall from './vertical-small'
import Vertical from './vertical'
import CN from '../index.zh-CN.md'
import US from '../index.en-US.md'

const md = {
  cn: `# Steps

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

  ## 何时使用

  当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
            ## 代码演示`,
  us: `# Steps

  'Steps' is a navigation bar that guides users through the steps of a task.

  # When To Use

  When the task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.
  ## Examples 
  `,
}
export default {
  category: 'Components',
  subtitle: '步骤条',
  type: 'Navigation',
  cols: 1,
  title: 'Steps',
  render () {
    return (
      <div>
        <md cn={md.cn} us={md.us}/>
        <Simple />
        <br/>
        <SmallSize />
        <br/>
        <Icon />
        <br/>
        <StepNext />
        <br/>
        <Vertical />
        <br/>
        <VerticalSmall />
        <br/>
        <Error />
        <br/>
        <ProgressDot />
        <br/>
        <CustomizedProgressDot />
        <br/>
        <api>
          <template slot='cn'>
            <CN/>
          </template>
          <US/>
        </api>
      </div>
    )
  },
}
</script>