# @beisen-platform/guide

> 引导用户按照流程完成任务的导航条，可设步骤节点是否可点击

Latest version **0.0.10-rc.1** (published 2019-04-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-platform/guide
pnpm add @beisen-platform/guide
yarn add @beisen-platform/guide
bun add @beisen-platform/guide
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.10-rc.1 |
| Published | 2019-04-30 |
| First published | 2018-11-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 62.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | xiaosiyu |
| Maintainers | beisencorp |
| Keywords | beisen, react-component, es6, karma, jasmine, form, input |

## Links

- npm: https://www.npmjs.com/package/@beisen-platform/guide
- Repository: git@gitlab.beisen.co:cnpm/beisen-module-template
- npm.io page: https://npm.io/package/@beisen-platform/guide

## Dependencies (4)

- [@beisen-platform/tool-tip](https://npm.io/package/@beisen-platform/tool-tip.md)
- [@beisen-platform/common-func](https://npm.io/package/@beisen-platform/common-func.md)
- [@beisen-platform/icon-button](https://npm.io/package/@beisen-platform/icon-button.md)
- [@beisen-platform/react-icons](https://npm.io/package/@beisen-platform/react-icons.md)

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.10-rc.1 (latest) — 2019-04-30
- 0.0.10 — 2019-04-16
- 0.0.9 — 2019-03-15
- 0.0.7 — 2018-11-29

## README

# guide 使用说明

## 项目运行

1. cnpm install 或 npm install cnpm使用教程

2. npm run dev （开发环境打包 port:8080）

3. npm run test （测试用例）

4. npm run build （生产环境打包）

## guide参数

```
	{
		list:[
			{
				id:0  //非必须
				,text:"同步入离职"  //节点显示文字
				,status:"done"    //节点显示状态， "done"- 已完成， "doing"-当前步骤，"todo"-未开始
				,isChecked:false  //选中当前节点
				,disabled:false   //该节点是否被禁用
			}
		]
		,minScroll: 50 //当出现滚动条后，点击按钮时滚动距离，默认50px
		,onClick: (val) => {console.info(val)} //节点的点击事件，会将相应节点数据抛出
	}
```

## 视图页隐藏头部参数

```
	
	hidePageHeader=1(或true) ,//根据url中参数判断是否显示头部，hidePageHeader=任意值则隐藏视图页头部
	前端在url中加入该参数来隐藏视图页头部

```


## guide调用方法

1.安装npm组件包

```
npm install @beisen/guide --save-dev
```

2.引用组件

  ```
import Guide from "@beisen/guide"
  ```


3. 传入参数

	该参数为上述参数，传入方式使用: {...参数}
	```
	const data = {
				list:[
					{
						id:0
						,text:"同步入离职"
						,status:"done"
						,isChecked:false
						,disabled:false
					},
					{
						id:1
						,text:"计算"
						,status:"done"
						,isChecked:false
						,disabled:false
					},
					{
						id:2
						,text:"差异分析"
						,status:"doing"
						,isChecked:true
						,disabled:false
					},
					{
						id:3
						,text:"关联处理"
						,status:"done"
						,isChecked:false
						,disabled:false
					},
					{
						id:4
						,text:"差异分析"
						,status:"todo"
						,isChecked:false
						,disabled:true
					}
					,
					{
						id:5
						,text:"差异分析"
						,status:"todo"
						,isChecked:false
						,disabled:false
					}
					,
					{
						id:6
						,text:"发布工资条"
						,status:"todo"
						,isChecked:false
						,disabled:false
					}
				]
				,minScroll: 50 //点击按钮时滚动距离，默认50px
				,onClick: (val) => {console.info(val)}
			}

	render () {
			return (
				<Guide {...data} />
			)
		}
	```

---
_Source: https://npm.io/package/@beisen-platform/guide · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._