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 |