Publicado em por Alexandre Machado

Conheça Drop.js, uma biblioteca JavaScript

Drop.js é uma biblioteca JavaScript e CSS para criação de menus dropdowns e outros pop-ups. A biblioteca utiliza o Tether.js para posicionar seus elementos com eficiência.

Conheça alguns recursos:

Como o Drop é construído em cima do Tether.js, você consegue usufruir dos benefícios de posicionamento eficientemente.

  • Drops podem ser alinhados dentro de outros drops;
  • O Drop usa acelração da GPU para se manter em 60fps ao utilizar o scrolling;
  • Você pode utilizar toda a potência do Tether para posicionar o seu Drop em qualquer lugar;
  • Eles podem ser configurados para abrir quando o usuário clica, passa o mouse ou focaliza um elemento;
  • Os Drops são reposicionados automaticamente quando o usuário utiliza o scroll na tela, reorientando para permanecer na exibição;
  • O Drop é mantido pelos desenvolvedores do HubSpot que se preocupam em fazer tudo o que você precisa.

Inicialização:

Para criar um Drop, crie uma instância drop:

let dropInstance = new Drop({
  target: document.querySelector('.drop-target'),
  content: 'Welcome to the future',
  classes: 'drop-theme-arrows',
  position: 'bottom left',
  openOn: 'click'
})

Métodos:

Você pode chamar alguns métodos na sua instância drop:

open()

Abre o drop. Adiciona o drop-open e outras classes ao drop;

close()

Fecha o drop. Remove o drop-open e outras classes do drop. Drops fechados ainda permanecem no DOM;

remove()

Remove o drop do DOM. Pode ser usado como uma alternativa para o close();

toggle()

Fecha o drop se estiver aberto, e abre o drop se estiver fechado;

isOpened()

Retorna true se o drop estiver aberto;

position()

Reposiciona o drop. Utilize-o se você alterar o conteúdo do drop ou a posição do elemento;

destroy()

Remove o drop junto com todos os seus eventos.

Opções:

Você pode passar as seguintes opções para o seu construtor:

target:

O elemento (ou seletor) ao qual o drop permanece adjacente à página. Uma ação nesse elemento pode ser definida para abrir o drop.

content:

O conteúdo que deve ser renderizado no drop.

position:

Especifica a posição destino a qual anexar o drop.

openOn:

Especifica o evento do drop;

classes:

Nomes de classes adicionais a serem adicionados ao drop;

remove:

Defina como true se você desejar que o drop  seja removido do DOM quando fechado e recriado quando aberto.

Você pode conferir diversos outros métodos e opções diretamente na documentação da biblioteca, disponível em inglês no site original:https://github.hubspot.com/drop/

Gostou deste artigo? Comenta abaixo!

Deixe um comentário