Instalación
Hay dos opciones para instalar y usar el botón Escape. Si su proyecto está configurado para manejar un entorno Node.js, puede instalarlo a través de un administrador de paquetes de su elección (npm o yarn). De lo contrario, puede simplemente agregar nuestro enlace CDN a las páginas en las que desea mostrar el botón Escape.
Paso 1: Agregar componente HTML
El botón Escape está diseñado para manejar situaciones en las que el usuario o el navegador no tienen habilitado Javascript y cuando lo tienen. Para lograr esto, el marcado real del botón debe agregarse a cada página en la que desea mostrar el botón.
<div class="ow-screen-padding">
<noscript>
<a href="https://www.amazon.com/?search=las-ofertas-mas-nuevas-del-dia/490239040234023942342i04203904">
<div class="ow-leave-page-fab animate ow-leave-fab">
<div class="ow-fab-icon"></div>
<h3>Salida de seguridad</h3>
</div>
</a>
</noscript>
<div class="ow-leave-page-fab animate script-enabled ow-leave-fab">
<div class="ow-fab-icon"></div>
<h3>Salida de seguridad</h3>
</div>
</div>
Paso 2: Instalar/Agregar secuencia de comandos
Opción 1: Instale el paquete con un administrador de paquetes:
npm install escape-button-js --save
# o
yarn add escape-button-js
Opción 2: Agregue el enlace de CDN en la parte inferior del elemento <body> en cada página en la que desee mostrar el botón (asegúrese de que el enlace esté debajo del marcado del componente que agregó anteriormente):
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.var.min.js"></script>
Uso
// Requerir módulo
const { EscapeButton } = require('escape-button-js');
// Habilitar botón de escape
EscapeButton(Options);
Opciones
Las siguientes opciones están disponibles para el constructor JS:
newTabUrlactualiza la URL que se abre instantáneamente en una nueva pestañareplaceTabUrlactualiza la URL que reemplaza la pestaña actual
Estilo personalizado
Es posible anular el estilo del botón Escape en su propia hoja de estilo creando las siguientes clases:
.ow-screen-padding {
}
.ow-leave-page-fab {
}
.ow-leave-page-fab:hover {
}
.ow-leave-page-fab h3 {
}
.ow-leave-page-fab .ow-fab-icon {
}
Versión de WordPress
También hemos creado una versión del botón de escape en formato de complemento de WordPress para la comunidad. ¡Échale un vistazo aquí!
