uxcore-steps

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 或者需要显示的内容。