SuperSlide.js

Superslide.js

Un menú deslizante ligero y configurable para su próximo PWA con promesas. ¡Solo 2k Gzipped!

Esta biblioteca tiene como objetivo proporcionar un menú deslizante altamente configurable y listo para usar para su próxima aplicación web, al tiempo que ofrece un rendimiento de animación similar a la nativa. Fue creado por las tecnologías OSREC mientras desarrollaba BX, nuestra factura, seguimiento de tiempo y gestión de proyectos PWA.

Instalación

 npm install superslide.js

Uso

Referencia a la biblioteca en una etiqueta de script

 < script src =' superslide.js ' > </ script >

Agregar marcado básico de HTML

 < body >
  < div id =' content ' > Content </ div >
  < div id =' menu ' > Menu </ div >
</ body >

Agregue estilos (¡para que podamos ver lo que está pasando!)

 < style >
  body     { padding: 0px; margin: 0px; }
  #menu    { background: #ccc; }
  #content { min-height: 100vh; min-width: 100vw; }
</ style >

Inicializar el menú

 var myMenu = new OSREC . superslide
( {
    slider : document . getElementById ( 'menu' ) ,
    content : document . getElementById ( 'content' ) ,
    animation : 'slideLeft'
} ) ;

// Promise resolves once menu is open
var openPromise = myMenu . open ( ) ;

Prueba la demostración aquí

Animaciones

La versión estándar tiene 4 opciones de animación disponibles:

slideleft	veloz	slidebottom	deslizamiento

La versión Pro contiene muchas más animaciones de menú (échale un vistazo @ https://osrec.co.uk/products/superslidejs)

Parámetros

• animation ( string ): cualquiera de las animaciones en la biblioteca de animación ( slideLeft , slideRight , slideTop , slideBottom ).

• duration ( integer ): duración en segundos para la animación de diapositivas

• allowDrag ( boolean ): permita que el menú se arrastre a la posición abierta o cerrada a través de eventos táctiles.

• slideContent ( boolean ): deslice el contenido junto con el menú

• allowContentInteraction ( boolean ): permita hacer clic o desplazar el contenido mientras el menú está abierto

• closeOnBlur ( boolean ): cierre el menú cuando el usuario haga clic o toca en cualquier lugar fuera del menú

• width ( string ): el ancho del menú (para menús que se sientan a lo largo de un borde vertical). Ejemplos: '60VW' o '300px' o '80%'

• height ( string ): la altura del menú (para menús que se sientan a lo largo de un borde horizontal). Ejemplos: '50vh' o '300px' o '80%'

• dragThreshold ( integer ): el número de píxeles desde el borde desde donde un usuario puede comenzar a arrastrar; Ejemplo: 70. Use con la opción ISSHIDDRAG.

• openThreshold ( integer ): cuando el menú está en la posición abierta, el número de píxeles debe arrastrarse antes de que se abra automáticamente; Ejemplo: 30. Use con la opción ISSOWDRAG.

• closeThreshold ( integer ): cuando el menú está en la posición cerrada, el número de píxeles debe arrastrarse antes de que se cierre automáticamente; Ejemplo: 20. Use con la opción ISSHDRAG.

• beforeOpen ( callback ): ejecutado antes de que el menú comience a abrir

• onOpen ( callback ): ejecutado directamente después de que el menú se haya abierto

• beforeClose ( callback ): ejecutado antes de que el menú comience a cerrar

• onClose ( callback ): ejecutado tan pronto como el menú se haya cerrado

Métodos

• OSREC.superslide.open() Abra el menú. Devuelve una promesa que se resuelve una vez que se abre el menú (es decir, se completa la animación).

• OSREC.superslide.close() Cierre el menú. Devuelve una promesa que se resuelve una vez que se cierre el menú (es decir, se completa la animación).

• OSREC.superslide.toggle() alterna el menú. Devuelve una promesa que se resuelve una vez que se ha alternado el menú (es decir, se completa la animación).

• OSREC.superslide.isOpen() Verdadero Si el menú está abierto, falso si está cerrado. El último estado si mediano drag. Devuelve un booleano.

• OSREC.superslide.ready() Verifique si el menú está completamente inicializado. Devuelve una promesa que se resuelve cuando está completamente inicializada.

• OSREC.superslide.destroy() destruir el menú. Esto cerrará el menú si está abierto antes de destruir. Devuelve nulo

Créditos

Creado por el equipo de BX en OSREC Technologies.

La biblioteca se desarrolló como parte de nuestra aplicación de gestión de negocios y proyectos llamada BX (puede verla aquí).