Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Awesome Lists containing this project

README

        

# Trail


Trail logo

> 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[]): TrailCore

export 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)