TutorialBlazor 1.0.384

• 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:

En el App.razor:

<script src="_content/TutorialBlazor/lib/tutorial.js"></script> <link href="_content/TutorialBlazor/lib/tutorial.css" rel="stylesheet" />

Colocar esas dos lineas.

Estas lineas básicamente, te permitiran acceder a los métodos de la libreria de JavaScript y el CSS del tutorial.

• Tercer paso

Añadir en program.cs el siguiente código:

builder.Services.AddTutorialServices();

Esto permitirá el uso de los métodos del servicio de tutoriales en el proyecto.

• Cuarto 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:

private PasosTutorial NombreTutorial { get; set; } // Creas la clase.

private async Task IniciarlizarTutorial()
{
    await IniciarTutorial();

}

protected override async Task OnInitializedAsync()
{
    NombreTutorial = await tutorialService.CargarTutorialAsync("ruta/de/tu/tutorial"); // Cargas el json (Puedes hacer tantos tutoriales como json tengas)
}

private async Task IniciarTutorial()
{
    if (NombreTutorial == null) return;
    await tutorialService.IniciarTutorial(this, NombreTutorial); // Llamas al servicio para iniciar el tutorial.
}

[JSInvokable("ActualizarPaso")]
public async Task ActualizarPaso(string paso)
{
    await tutorialService.ActualizarPaso(NombreTutorial, paso); // Actualizas el paso del tutorial.
}