Essa GEM fornece acesso ao plugin jQuery para colocar ações como barra flutuante anexa a um container
- jQuery 1.2+
Adicione essa linha no Gemfile do projeto:
gem 'floating_action'
Adicione a seguinte linha no seu arquivo application.css
:
*= require floating_action/floating_action
Adicione a seguinte linha no seu arquivo application.js
:
//= require floating_action/floating_action
Para inicializar o plugin você utilizará o código abaixo:
var floating_action = new FloatingAction({
containerClass: 'floating-container-style',
contentClass: 'floating-content-style',
direction: 'center'
}).init();
Seus eventos são baseados em delegator do jQuery e estão vinculados ao document.
Para transformar um grupo de ação em barra flutuante você deve adicionar a classe .float-actions-container
a um elemento e a classe .float-actions-content
a um elemento filho.
Exemplo:
%table.table
%tr.floating-action-container
%td José da Silva
%td Empresa XYZ
%td.floating-action-content
%a{:href => '#'} Editar
%a{:href => '#'} Remover
A barra só aparecerá em resolução acima de 992px onde o dispositivo é considerado DESKTOP, abaixo dessa resolução não haverá modificações no elemento e a barra não aparecerá, mantendo o elemento original com a classe float-actions-content
visível.