Ember Floating Mobile Buttons

Stylish and easy to use Ember floating buttons.

More information in the demo site.

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 examples above, you can combine it with your own icon library.

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/.