2.2.1 • Published 6 years ago

uxcore-steps v2.2.1

Weekly downloads
15
License
MIT
Repository
github
Last release
6 years ago

uxcore-steps Dependency Status devDependency Status

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

配置项说明类型可选值默认值
prefixClsprefix class namestringkuma-step
classNameadditional class name added to wrapstring
current可选参数,指定当前处理正在执行状态的步骤,从0开始记数。在子Step元素中,可以通过status属性覆盖状态。number0
direction可选参数,指定步骤条方向(目前支持水平和竖直两种方向,默认水平方向)。stringvertical
maxDescriptionWidth可选参数,指定步骤的详细描述文字的最大宽度。number100
showIcon步骤节点是否显示图标或数字booltrue or falsetrue
type步骤条类型stringdefault arrow-bar title-on-top long-desc or bottom-descdefault
showDetail可选参数direction=vertical或type=long-desc不生效,是否显示详情面板step的childrenbooltrue falsefalse
currentDetail可选参数direction=vertical或type=long-desc不生效,指定当前正在显示的详情面板,从0开始记数number0 ...0
onChange可选参数仅仅在 showDetail 或节点为 editable 时生效,指定步骤icon点击事件回调,参数为被点击步骤对应数字func(v)=>{}

Steps.Step

配置项说明类型可选值默认值
status可选参数,指定状态。当不配置该属性时,会使用父Steps元素的current来自动指定状态。stringwait, process, finish, errorwait
title必要参数,标题。string/jsx
description可选参数,步骤的详情描述。string/jsx
icon可选参数,步骤的Icon。如果传 string,则为自定义样式方式;如果传 jsx,请传 uxcore-icon。string/jsx
editable可选参数,该步骤的内容是否可以返回编辑。booleantrue/falsefalse
  • 在 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