Installation 

ember install ember-floating-mobile-buttons

Usage

Define a simple floating button.

{{#floating-mobile-buttons}}
    <a href>{{fa-icon "pencil"}}</a>
{{/floating-mobile-buttons}}

You can additionally define child buttons which will be display grouped by the parent button.

{{#floating-mobile-buttons position="bottom right"}}
    {{#floating-mobile-child-buttons label="Add Item"}}
        <a href>{{fa-icon "user"}}</a>
    {{/floating-mobile-child-buttons}}
    {{#floating-mobile-child-buttons label="Remove Item"}}
        <a href>{{fa-icon "trash-o"}}</a>
    {{/floating-mobile-child-buttons}}
    {{#floating-mobile-child-buttons label="Edit Item"}}
        <a href>{{fa-icon "pencil"}}</a>
    {{/floating-mobile-child-buttons}}
{{/floating-mobile-buttons}}

The floating-mobile-buttons component yields the clousure action toggleChildren so you are able to use it in your child components to toggle the child button group.

{{#floating-mobile-buttons as |toggleChildren|}}
  {{#floating-mobile-child-buttons label="Add Item"}}
  <a href {{action toggleChildren}}>{{fa-icon "user"}}</a>
  {{/floating-mobile-child-buttons}}
  {{/floating-mobile-buttons}}

As seen in the example above, you can combine it with you own icons.

Properties

Position

The fixed position of the floating button.

The available list por position:

  • bottom right (default)
  • bottom left
  • top right
  • top left

Running

  • ember serve
  • Visit your app at http://localhost:4200.

Running tests

  • npm test (Runs ember try:each to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit https://ember-cli.com/.