SuperSlide.js

SuperSlide.js

Um menu deslizante leve e configurável para o seu próximo PWA com promessas. Apenas 2k Gzipped!

Esta biblioteca visa fornecer um menu deslizante altamente configurável e pronto para uso para o seu próximo aplicativo da Web, enquanto oferece desempenho de animação do tipo nativo. Foi criado pelas tecnologias OSREC durante o desenvolvimento de BX, nosso faturamento, rastreamento no tempo e gerenciamento de projetos PWA.

Instalação

 npm install superslide.js

Uso

Faça referência à biblioteca em uma etiqueta de script

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

Adicionar marcação básica de HTML

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

Adicione estilos (para que possamos ver o que está acontecendo!)

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

Inicialize o menu

 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 ( ) ;

Experimente a demonstração aqui

Animações

A versão padrão tem 4 opções de animação disponíveis:

Slideleft	liso	slidebottom	slidetop

A versão Pro contém muitas outras animações de menu (confira @ https://osrec.co.uk/products/superslidejs)

Parâmetros

• animation ( string ): Qualquer uma das animações na Biblioteca de Animação ( slideLeft , slideRight , slideTop , slideBottom ).

• duration ( integer ): duração em segundos para a animação de slide

• allowDrag ( boolean ): permita que o menu seja arrastado para a posição aberta ou fechada por meio de eventos de toque.

• slideContent ( boolean ): deslize o conteúdo junto com o menu

• allowContentInteraction ( boolean ): Permita que o conteúdo seja clicado ou rolado enquanto o menu está aberto

• closeOnBlur ( boolean ): Feche o menu quando o usuário clicar ou torneiras em qualquer lugar fora do menu

• width ( string ): a largura do menu (para menus que ficam ao longo de uma borda vertical). Exemplos: '60vw' ou '300px' ou '80%'

• height ( string ): A altura do menu (para menus que ficam ao longo de uma borda horizontal). Exemplos: '50VH' ou '300px' ou '80%'

• dragThreshold ( integer ): o número de pixels da borda de onde um usuário pode começar a arrastar; Exemplo: 70. Use com a opção AllowDrag.

• openThreshold ( integer ): Quando o menu está na posição aberta, o número de pixels, ele deve ser arrastado antes de abrir automaticamente; Exemplo: 30. Use com a opção AllowDrag.

• closeThreshold ( integer ): Quando o menu está na posição fechada, o número de pixels, ele deve ser arrastado antes de fechar automaticamente; Exemplo: 20. Use com a opção AllowDrag.

• beforeOpen ( callback ): executado antes do menu começar a abrir

• onOpen ( callback ): executado logo após o menu abrir

• beforeClose ( callback ): executado antes do menu começar a fechar

• onClose ( callback ): executado assim que o menu fechar

Métodos

• OSREC.superslide.open() Abra o menu. Retorna uma promessa que resolve quando o menu é aberto (ou seja, a animação é concluída).

• OSREC.superslide.close() Feche o menu. Retorna uma promessa que resolve quando o menu fechar (ou seja, a animação é concluída).

• OSREC.superslide.toggle() alterna o menu. Retorna uma promessa que resolve depois que o menu for alterado (ou seja, a animação é concluída).

• OSREC.superslide.isOpen() true se o menu estiver aberto, falso se fechado. O último estado se mid-drag. Retorna um booleano.

• OSREC.superslide.ready() verifique se o menu está totalmente inicializado. Retorna uma promessa que resolve quando totalmente inicializada.

• OSREC.superslide.destroy() Destroe o menu. Isso fechará o menu se estiver aberto antes de destruir. Retorna nulo

Créditos

Criado pela equipe BX da OSREC Technologies.

A biblioteca foi desenvolvida como parte do nosso aplicativo de negócios e gerenciamento de projetos chamado BX (você pode conferir aqui).