@advanced-rest-client/paper-fab-menu

Material design: Floating Action Button

A floating action button represents the primary action in an application.

Use the <paper-fab-menu> to display menu-like fab buttons and to promote actions.

Example

<paper-fab-menu icon="add">
  <paper-fab mini title="Favorites" icon="star"></paper-fab>
  <paper-fab mini title="Refresh" icon="refresh"></paper-fab>
  <paper-fab mini title="Text label" label="D"></paper-fab>
</paper-fab-menu>

In a LitElement template

import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/paper-fab-menu/paper-fab-menu.js';

class SampleElement extends LitElement {
  render() {
    return html`
    <paper-fab-menu icon="add">
      <paper-fab mini title="Favorites" icon="star"></paper-fab>
      <paper-fab mini title="Refresh" icon="refresh"></paper-fab>
      <paper-fab mini title="Text label" label="D"></paper-fab>
    </paper-fab-menu>
    `;
  }
}
customElements.define('sample-element', SampleElement);

Styling

Style the menu using <paper-fab> variables.

The element uses --paper-fab-menu-background-color variable to set a background color or the main <paper-fab> element.

Development

git clone https://github.com/@advanced-rest-client/paper-fab-menu
cd paper-fab-menu
npm install

Running the demo locally

npm start

Running the tests

npm test

Changelog

3.0.0 (2019-07-17)

Breaking

• Upgrading to Polymer 3 (d9e5882c824e5889fbed0728bf1d3464213d08bb)

build

• bumping version (bd9c939802f6bb06d39ef986ee1478bf0b9b82e6)

New

• Adding npm ignore file (a8e620d4099fddc68310913f3340e9d9eaeef15d)
• Adding test coverage (94af70dee935f2503490164a99b1e6ed09d86a4e)

refactor

• updating component to use LitElement (4648ae3d6d7a923823190af97730b15cead7bc4c)

test

• removing endge deom tests because of some wired behavior (2b615c076a860a38270dea25f8976416d85a1695)
• updating test ame in SL (b0427f51b8c5da280d5957d720ed7aa5de0f298d)

Update

• Added new Travis configuration (8fa90aae250584ad0e17ded91c82a7658a4731d2)
• removed vertical position, fixed an issue where it was possible to click on element when it was hidden (6d09e394fc5287bb1bdb56ad45e94e4d6302f269)
• Removing @apply from styles (a9bcf8fa8ed88aff67b7496361c51481b8971e80)
• Removing old files (2697718be5e5cd75a0fc7f4a377f95562cae9b2a)
• Updating paths to match web spec (a6c1ab286edc89571a0787eb1a84a528fab5748d)
• Upgrading dependencies (61fd0e3b0c1752165f230e7934d7b6ced74b3db8)