# driver-any

> Highly customizable step guide

Latest version **0.0.7** (published 2022-12-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install driver-any
pnpm add driver-any
yarn add driver-any
bun add driver-any
```

## Health

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

Positive: has types; no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2022-12-17 |
| First published | 2022-07-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 26.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | CodeGorgeous |
| Maintainers | codegorgeous |
| Keywords | driver, typescript |

## Links

- npm: https://www.npmjs.com/package/driver-any
- Repository: https://github.com/CodeGorgeous/driver-any
- Issues: https://github.com/CodeGorgeous/driver-any/issues
- npm.io page: https://npm.io/package/driver-any

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.0.7 (latest) — 2022-12-17
- 0.0.6 — 2022-12-15
- 0.0.5 — 2022-09-11
- 0.0.4 — 2022-09-08
- 0.0.3 — 2022-07-22
- 0.0.2 — 2022-07-22
- 0.0.1 — 2022-07-21

## README

### 👨介绍/Why

🚀 Driver-any能够帮助你更加快速的自定义化的为你页面中添加引导步骤, 只需简单的配置步骤即可呈现想要的引导用户快速使用网站的效果.

### 💻使用/Use

##### 引入样式文件

⭐ 在使用前你应该及时的引用来自**Driver-any**的样式文件, 该文件中涵盖着默认引导步骤所需要的样式.
```js
import "driver-any/dist/index.css"
```

##### 使用Driver-any

###### 🚀 简单使用
```js
import "driver-any/dist/index.css"
import { DriverAny } from "driver-any";

// 通过driver包中导出的DriverAny类产生一个实例
const driver = new DriverAny();

// 自定义引导步骤的每一步
driver.configurationSteps([{
    domSelector: "#step1", // 该步骤所引导的元素的选择器
    stepDesc: "This is the descriptor for step one", // 该步骤的步骤描述
    pushComponentPosition: "top" 
}, {
    domSelector: "#step2",
    stepDesc: "This is the descriptor for step two",
    pushComponentPosition: "right"
}]);

// 最后启动我们设定好的引导步骤
driver.start();
```

###### 🏂 更加自由的使用

```js
import { DriverAny } from "driver-any";

// 通过driver包中导出的DriverAny类产生一个实例
const driver = new DriverAny({
    pushComponentPosition: "top", // 默认步骤推动元素位于引导元素的哪个方位
    ifUsePushComponent: true, // 是否使用自己所编写的引导步骤元素
    ifClickMaskCloseStep: false, // 点击遮罩层是否可关闭
    animation: true, // 动画过渡效果
    onCloseCallback: () => {console.log("close");}, // 引导步骤关闭时触发的回调函数
    onFinishCallback: () => {console.log("finish");}, // 引导步骤完成时触发的回调函数
    onNextCallback: (item) => {console.log("下一步", item);}, // 引导步骤的下一步触发时触发的回调函数
    onPrevCallback: (item) => {console.log("上一步", item);}, // 引导步骤的上一步触发时触发的回调函数
});

// 自定义引导步骤的每一步
driver.configurationSteps([{
    domSelector: "#step1", // 该步骤所引导的元素的选择器
    stepDesc: "This is the descriptor for step one", // 该步骤引导的描述语
    customizedPushComponent: "#step1-form",// 使用自己所书写的推动引导步骤的元素的选择器
    pushComponentPosition: "top" // 该步骤元素位于引导元素的哪个方位
}, {
    domSelector: "#step2",
    stepDesc: "This is the descriptor for step two",
    customizedPushComponent: "#step2-form",
    pushComponentPosition: "right"
}]);

// 最后启动我们设定好的引导步骤
driver.start();
```

### 参数/Params

##### DriverAny
| 名称 | 注解 | 类型 | 默认值 |
| :-: | :-: | :-: | :-: |
| maskClass | 自定义遮罩层class名 | string \| undefined | "" |
| maskZIndex | 自定义遮罩层z-index | number | 100 |
| selectClass | 自定义选中元素背景板class名 | string \| undefined | "" |
| selectPadding | 自定义选中元素背景板padding | number | 5 |
| ifUsePushComponent | 是否采用默认推动组件状态 | boolean | true |
| pushComponentPosition | 提示推动下一步引导步骤的状态组件位置 | "top" \| "right" \| "bottom" \| "left" | "bottom" |
| closeButtonText | 关闭按钮的按钮文本 | string \| undefined | "关闭" |
| nextButtonText | 下一步按钮的按钮文本 | string \| undefined | "下一步" |
| prevButtonText | 上一步按钮的按钮文本 | string \| undefined | "上一步" |
| finishButtonText | 完成按钮的按钮文本 | string \| undefined | "完成" |
| ifShowCloseButton | 是否展示关闭按钮 | boolean \| undefined | false |
| ifShowNextButton | 是否展示下一步按钮 | boolean \| undefined | true |
| ifShowPrevButton | 是否展示上一步按钮 | boolean \| undefined | false |
| animation | 是否开启动画效果 | boolean \| undefined| true |
| pushComponentClass | 自定义推送状态组件的描述文本class名 | string \| undefined | "" |
| ifClickMaskCloseStep | 点击遮罩层是否可关闭引导 | boolean \| undefined | true |
| ifScrollPageWhenStepStart | 引导步骤时是否允许页面滚动(暂时只支持禁止滚动) | boolean | false |
| onNextCallback | 引导步骤触发下一步时触发的回调函数 | ```(step: IDriverStepConfig) => void``` \| undefined | () => {} |
| onPrevCallback | 引导步骤触发上一步时触发的回调函数 | ```(step: IDriverStepConfig) => void``` \| undefined | () => {} |
| onFinishCallback | 引导步骤触发完成时触发的回调函数 | ```() => void``` \| undefined | () => {} |
| onCloseCallback | 引导步骤触发关闭时触发的回调函数 | ```() => void``` \| undefined | () => {} |

### 📚 更多功能, 敬请期待...

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