Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ionited/trail
Guide your user, step by step
https://github.com/ionited/trail
frontend guide step tour trail ui user ux
Last synced: about 2 months ago
JSON representation
Guide your user, step by step
- Host: GitHub
- URL: https://github.com/ionited/trail
- Owner: ionited
- Created: 2021-09-30T23:58:18.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-20T22:43:56.000Z (11 months ago)
- Last Synced: 2024-11-10T09:49:48.332Z (2 months ago)
- Topics: frontend, guide, step, tour, trail, ui, user, ux
- Language: TypeScript
- Homepage:
- Size: 105 KB
- Stars: 18
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Trail
> Guide your user, step by step
A simple and lightweight tour library
## Quick start
Choose your favorite option below:
### Install with NPM
```
npm i @ionited/trail
```### Get from UNPKG
[https://unpkg.com/@ionited/trail@latest/dist/trail.js](https://unpkg.com/@ionited/trail@latest/dist/trail.js)
---
## Usage
To basic usage you can simply call:
```js
var trail = Trail([{
id: 1,
content: 'First step',
attachedEl: document.getElementById('one')
}, {
id: 2,
content: 'Step two, without attachedEl'
}, {
id: 3,
content: 'Step 3',
attachedEl: document.getElementById('two'),
interactive: false
}, {
id: 4,
content: 'Step 4, end of the line!',
attachedEl: document.getElementById('three')
}]);
```### Options
```ts
Trail(steps?: Step[]): TrailCoreexport interface Step {
id: any;
content: HTMLElement | string;
attachedEl?: HTMLElement | null;
interactive?: boolean;
}interface TrailCore {
steps: Step[];
next(): void;
back(): void;
stop(): void;
destroy(): void;
}
````TrailCore.steps` is just an array, you can use any `Array` functions on this (e.g, `push`, `splice`, `unshift`)
## License
Copyright (c) 2021 Ion. Licensed under [MIT License](LICENSE).
[https://ionited.io](https://ionited.io)