1.0.2 • Published 1 year ago
tour-web v1.0.2
Tour-web
El proposito de esta libreria es
- Dar un recorrido en elemntos graficos de una aplicación web
Setup
Importar la clase Tour
import {Tour} from 'tour-web';Crear una instancia de Tour
const tour = new Tour();Agregar paso al tour
tour.addPaso({
target: '#titulo',
contenido: `<p>Titulo de la libreria</p>`,
posicion: 'botton',
acciones:[
{
texto: 'Siguiente',
accion: tour.siguiente
}
]
});Iniciar el tour
tour.inicia();Clase Tour
Esta cuenta con los siguientes metodos
| Método | Descripción |
|---|---|
| addPaso(paso: ipaso) | Agrega un paso al tour |
| esActivo | Regresa true si esta activo el tour |
| inicia | Inicia el tour |
| siguiente | Pasa al siguiente paso del tour. Si es el último paso termina el tour |
| atras | Retrocede al paso anterior |
| cancelar | Cancela el tour |
Definicion de paso(iPaso)
Un paso esta definido por los siguientes atributos
| Atributo | tipo | Descripción |
|---|---|---|
| target | string | Es el selector al que hace target |
| contenido | string | Es el contenido que se muestra en el paso, este se agrega el innerHTML del paso |
| posicion | 'top' | 'botton' | Indica la posción del paso sobre el elemento target |
| acciones | iaccion[] | Es un arreglo de acciones |
Definición de accion(iaccion)
Una acción es un boton que se muestra el paso, este tiene un texto y tiene una acción a arealizar.
| Atributo | tipo | Descripción |
|---|---|---|
| texto | string | Indica el texto del boton |
| class | string | Es la clase del boton |
| accion | ()=>void | Es la funcíon que indica lo que se hara cuando se haga click en la accion |