Walkthrough

Acerca de @clavisco/walkthrough

Token: Walkthrough

Permite mostrar los tours asociados a una vista específica y proporciona una interfaz intuitiva para su ejecución, facilitando la navegación guiada por las funcionalidades de la aplicación.

¿Qué resuelve?

Este componente está diseñado específicamente para gestionar y presentar tours interactivos dentro de la pestaña en la que se implemente en nuestra aplicación. Su principal objetivo es ofrecer a los usuarios una experiencia guiada que facilite la exploración y comprensión de las diferentes funcionalidades y características de la interfaz.

Dependencias

• @clavisco/core
• @clavisco/linker
• @clavisco/alerts
• @clavisco/skeleton

Configuraciones requeridas

• Tener implementado en su backend Cl.Core.Addons para .net core.
• Tener el token "Shared" con la configuración "apiUrl" con la url de su backend.
• Tener configurado un interceptor para las rutas que inyecte el token en las solicitudes realizadas por el componente.
• Tener las clases asociadas a los steps correctamente asignadas en el HTML; de lo contrario, el tour no funcionará correctamente.

Ejemplo:

Si en la configuración del step se especifica la clase ".first-step" en el campo "Elemento a vincular", esta misma clase debe estar presente en el archivo .html de la vista donde se mostrara el tour.

¿Cómo lo uso?

1. Ejecutar el comando npm i @clavisco/walkthrough en el directorio root del proyecto
2. Importar el módulo WalkthroughModule en el app.module.ts o en el módulo donde desea utilizar la presentación de tours.
3. Ejemplo de implementacion del componente en el template html (dicha implementacion se tiene que realizar en cada una de las vistas donde sea requerido)

<cl-walkthrough ></cl-walkthrough>

5. Ya con esto tenemos una implementación básica del componente walkthrough.

ClavisCo ©