2.2.1 • Published 6 years ago
uxcore-steps v2.2.1
uxcore-steps

TL;DR
uxcore-steps ui component for react
setup develop environment
$ git clone https://github.com/uxcore/uxcore-steps
$ cd uxcore-steps
$ npm install
$ npm run start
Usage
import Steps, { Step } from 'uxcore-steps';
ReactDOM.render(
<Steps current={0} type="bottom-desc">
<Steps.Step key={0} title="第一步" />
<Steps.Step key={1} title="第二步" />
<Steps.Step key={2} title="第三步" />
</Steps>, target)
demo
http://uxcore.github.io/uxcore/components/steps/
API
Props
Steps
配置项 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
prefixCls | prefix class name | string | kuma-step | |
className | additional class name added to wrap | string | ||
current | 可选参数,指定当前处理正在执行状态的步骤,从0开始记数。在子Step元素中,可以通过status属性覆盖状态。 | number | 无 | 0 |
direction | 可选参数,指定步骤条方向(目前支持水平和竖直两种方向,默认水平方向)。 | string | vertical | 无 |
maxDescriptionWidth | 可选参数,指定步骤的详细描述文字的最大宽度。 | number | 无 | 100 |
showIcon | 步骤节点是否显示图标或数字 | bool | true or false | true |
type | 步骤条类型 | string | default arrow-bar title-on-top long-desc or bottom-desc | default |
showDetail | 可选参数direction=vertical或type=long-desc不生效,是否显示详情面板step的children | bool | true false | false |
currentDetail | 可选参数direction=vertical或type=long-desc不生效,指定当前正在显示的详情面板,从0开始记数 | number | 0 ... | 0 |
onChange | 可选参数仅仅在 showDetail 或节点为 editable 时生效,指定步骤icon点击事件回调,参数为被点击步骤对应数字 | func | (v)=>{} |
Steps.Step
配置项 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
status | 可选参数,指定状态。当不配置该属性时,会使用父Steps元素的current来自动指定状态。 | string | wait, process, finish, error | wait |
title | 必要参数,标题。 | string/jsx | 无 | 无 |
description | 可选参数,步骤的详情描述。 | string/jsx | 无 | 空 |
icon | 可选参数,步骤的Icon。如果传 string,则为自定义样式方式;如果传 jsx,请传 uxcore-icon。 | string/jsx | 无 | 空 |
editable | 可选参数,该步骤的内容是否可以返回编辑。 | boolean | true/false | false |
- 在 React V16 之后,如果 icon 传入 jsx 并使用的是 uxcore-icon 时,请增加
usei
属性,否则 React 会抛出The tag <icon> is unrecognized in this browser
的警告信息 - 如果指定 editable 为 true,则该节点样式为可点击,使用需要配合传入 onChange 回调函数,回调函数将通过参数回传用户当前点击步骤的 key,可以通过 key 值来调整 current 或者需要显示的内容。
2.2.1
6 years ago
2.2.0
7 years ago
2.1.10
7 years ago
2.1.9
7 years ago
2.1.8
7 years ago
2.1.7
7 years ago
2.1.6
8 years ago
2.1.5
8 years ago
2.1.4
8 years ago
2.1.3
8 years ago
2.1.2
8 years ago
2.1.1
8 years ago
2.1.0
8 years ago
2.0.4
8 years ago
2.0.3
8 years ago
2.0.2
8 years ago
2.0.1
8 years ago
2.0.0
8 years ago
1.1.7
9 years ago
1.1.6
9 years ago
1.1.5
9 years ago
1.1.4
9 years ago
1.1.3
9 years ago
1.1.2
9 years ago
1.1.1
9 years ago
1.1.0
10 years ago
1.0.6
10 years ago
1.0.5
10 years ago
1.0.4
10 years ago
1.0.3
10 years ago
1.0.2
10 years ago
1.0.1
10 years ago
1.0.0
10 years ago