@bananin/btutorial v1.0.5

Galería

Bananin's Tutorial

Install

In head tag

<!-- head unpkg -->
<script src="https://unpkg.com/@bananin/btutorial@latest/js/btutorial.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/@bananin/btutorial@latest/css/btutorial.css" />

<!-- head jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@bananin/btutorial@latest/js/btutorial.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@bananin/btutorial@latest/css/btutorial.css" />

Setting

Javascript code:

const data = [
    { id: "bananin-titulo", con: "Este es el título del componente de <b>Bananin.</b>", col: "#fff" },
    { id: "bananin-head", con: "Este es el contenido que debes pegar en el head de tu página.", col: "#fff" },
    { id: "bananin-opciones", con: "Estas son las opciones del componente.", col: "#fff" },
    { id: "bananin-dona", con: "Este es el botón por si quieres hacer una donación, cof, cof.", col: "#fff" }
];

const tutorial = new BananinTutorial(data);//instancia la nueva clase de BananinTutorial y pasa el array creado anteriormente
/*
 * En este ejemplo, creamos un botón que llama al método 'tutorial.mostrarTuto()'.
 * No obstante, es importante destacar que cualquier elemento o acción que tenga
 * la capacidad de disparar este evento podría ser utilizado en su lugar.
*/
const tutoBtn = document.getElementById("tutoBtn");
tutoBtn.addEventListener("click", () => tutorial.mostrarTuto());

Methods:

//Start the tutorial
tutorial.mostrarTuto();

//Finish the tutorial
tutorial.cerrar();

Example in Tutoriales con Bananin

License

MIT

Patrocinar

With your help I can continue paying the server <3