TutorialBlazor 1.0.381

• Primero se deberá crear un carpeta donde se contenga un archivo Json dentro de tu carpeta wwwroot con el siguiente formato:

Ejemplo de un json de tutorial:

{ "estiloDefecto": "", "pasos": [ { "elementoId": "nav-link-counter", "mensaje": "Texto de mensaje para el paso 1, tutorial1", "clickAction": true, "transicion": true, "tamañosFijos": "Grande" }, { "elementoId": "tutorial-button", "mensaje": "Texto de mensaje para el paso 2", "tamañoPersonalizado": 1000, "nuevoEstilo": "" }, { "elementoId": "zona-articulo", "mensaje": "Zona del contador" }, { "elementoId": "nav-link-home", "mensaje": "Botón de inicio", "clickAction": true, "transicion": true }, { "elementoId": "colour-button", "clickAction": true, "transicion": false "tiempoEspera": 2000, }, { "elementoId": "elemento-especifico", "mensaje": "Cambia el color del texto a rojo", "botones": true, "rodearContenido": true } ] }

estiloDefecto: Estilo por defecto para el tutorial. (Le añade la clase, no un css completo) Se puede dejar vacío o poner un estilo CSS que se aplicará a todos los mensajes y contenedor del tutorial.

pasos: Array de elementos a destacar del tutorial. Cada paso tiene los siguientes atributos:

elementoId: Id del elemento a destacar. (Necesario)

mensaje: Mensaje que se mostrará en el paso. (Opcional)

clickAction: Si es true, se añade un evento click al elemento. (Opcional)

transicion: Si es true, se añade una transición al elemento, y permite pasar entre diferentes páginas. (Opcional)

tiempoEspera: Tiempo de espera en milisegundos para que se pase al siguiente paso del tutorial. (Opcional)

tamañoPersonalizado: Si se quiere un tamaño del ancho del mensaje personalizado en píxeles. (Opcional)

nuevoEstilo: Estilo CSS que se aplicará al elemento a parte del estilo predeterminado. (Opcional)

tamañosFijos: Tamaño del ancho del mensaje. Puede ser "Pequeña" 500px, "Mediana" 800px, o "Grande" 1500px. (Opcional)

botones: Hay botones por defecto, pero si lo pones en false, se elimnarán los botones. (Opcional)

rodearContenido: Si es true, se rodeará el contenido interno del elemento. Ejemplo, un parrafo solo resaltara la parte escrita y no el contenedor entero. (Opcional).

Para el correcto funcionamiento del tutorial, se necesita, el elemento a destacar y al menos una de las siguientes propiedades (o combinación de varias): mensaje (Con botones activados), clickAction, transicion y/o tiempoEspera.

• Segundo en el MainLayout de tu proyecto se tendrá que colocar la siguiente linea de código:

<Tutorial.Headers></Tutorial.Headers>

Esta linea básicamente, añadirá de forma automática las dependencias necesarias para poder acceder a los archivos de java script, aún así, si sabes de otras formas para poder acceder a los ficheros java script de una biblioteca, también se pueden utilizar.

• Tercer paso

Para poder llamar a los métodos del tutorial y así poder inicializarlo simplemente tendrás que añadir las siguientes lineas de código al módulo donde quieras llamar al proyecto:

protected override async Task OnInitializedAsync() { NombreDelTutorial = await tutorialService.CargarTutorialAsync("carpeta/nombretutorial.json"); // Ruta de la carpeta de tu archivo json. }

private async Task IniciarTutorial() // El nombre del método puede ser el que desees, pero este nombre es bastante descriptivo de lo que hace el método. { await tutorialService.IniciarTutorial(this, NombreDelTutorial); }

[JSInvokable("ActualizarPaso")] public async Task ActualizarPaso(string paso) // Pasa la información al Java Script de en que paso se encuentra en cada momento el tutorial. { await tutorialService.ActualizarPaso(NombreDelTutorial, paso); }