| | | | | | | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |

xy-steps

步骤条组件

安装

# yarn
yarn add xy-steps

使用例子

import React from "react";
import ReactDOM from "react-dom";
import { Steps, Step } from "xy-steps";
ReactDOM.render(
    <Steps step={2}>
        <Step title="Finished">This is a description.</Step>
        <Step title="In Progress">This is a description.</Step>
        <Step title="Waiting">This is a description.</Step>
    </Steps>,
    container,
);

API

Steps

| 属性 | 说明 | 类型 | 默认值 | | --------- | ------------------------------------------------------------------ | ------ | ---------- | | step | 当前步骤, 从数字 1 开始 | number | 1 | | status | 当前步骤状态, 可选值为 wait process finnish error 或者不设 | string | - | | direction | 方向, 可选值为 horizontal vertical | string | horizontal | | size | 设置按钮大小，可选值为 small large 或者不设 | string | default |

Step

| 属性 | 说明 | 类型 | 默认值 | | -------- | ----------------------- | --------------- | ------ | | step | 当前步骤, 从数字 1 开始 | number | 1 | | title | 步骤标题 | React.ReactNode | - | | children | 步骤描述 | React.ReactNode | - | | icon | 步骤图标 | React.ReactNode | - |

开发

yarn run start

例子

http://localhost:6006

测试

yarn run test

开源许可

xy-steps is released under the MIT license.