tour-web

Tour-web

El proposito de esta libreria es

• Dar un recorrido en elemntos graficos de una aplicación web

DEMO

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