Bananin's Tutorial

El componente de Tutoriales con Bananin es una herramienta que te ayudará a simplificar el proceso de creación de tutoriales básicos para tu sitio web. Con esta funcionalidad, podrás crear tutoriales de manera más sencilla y eficiente, sin necesidad de tener amplios conocimientos técnicos o habilidades de programación.

<!-- 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" />
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:

  • mostrarTuto: Start the tutorial
  • cerrar: Finish the tutorial

If you like it or want to try it visit the code at npmjs

Copyright © 2024 bananin.
Todos los Derechos Reservados.
Iniciar sesión | Términos y Condiciones

Desarrollado por: Bananin!!

Instala nuestra App. ¡Es gratis!