@polymer/paper-fab NPM

<paper-fab>

paper-fab is a floating action button. It contains an image placed in the center and comes in two sizes: regular size and a smaller size by applying the attribute mini. When the user touches the button, a ripple effect emanates from the center of the button.

See: Documentation, Demo.

Usage

Installation

npm install --save @polymer/paper-fab

In an html file

<html>
  <head>
    <script type="module">
      import '@polymer/paper-fab/paper-fab.js';
      import '@polymer/iron-icons/iron-icons.html';
    </script>
  </head>
  <body>
    <paper-fab icon="favorite"></paper-fab>
    <paper-fab label="😻"></paper-fab>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-fab/paper-fab.js';
import '@polymer/iron-icons/iron-icons.html';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
    <paper-fab icon="favorite"></paper-fab>
    <paper-fab label="😻"></paper-fab>
    `;
  }
}
customElements.define('sample-element', SampleElement);

Contributing

If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

Installation

git clone https://github.com/PolymerElements/paper-fab
cd paper-fab
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm

web-components polymer button

@polymer/polymer @polymer/iron-icon @polymer/paper-styles @polymer/paper-behaviors @polymer/iron-flex-layout

fundwave-fund-management zagenzagen-production @navigateconsulting/eva-bot zagen-zagen @teipublisher/pb-components7 @infinitebrahmanuniverse/nolb-_pol @everything-registry/sub-chunk-731 tangy-custom-form tangy-form @cromwellian/granite-qrcode-scanner @cwmr/paper-fab-speed-dial @anviltech/wuf-poly-paper-elements @aspen-elements/firefly-login @advanced-rest-client/saved-requests-panel @advanced-rest-client/project-details @advanced-rest-client/paper-fab-menu @advanced-rest-client/history-panel @advanced-rest-client/client-certificates-panel @advanced-rest-client/cookie-manager @casper2020/casper-epaper @firefly-elements/firefly-file @firefly-elements/firefly-login @longlost/scroll-fab @lrnwebcomponents/lrndesign-contentsequencer @lrnwebcomponents/lrnapp-fab-menu @lucentray/pine-web-components @longlost/app-file-system @longlost/app-shell @longlost/app-account @longlost/examples @longlost/ezf-shared @longlost/fancy-header-example @neogrup/nc-items-grid @neogrup/nc-search @navigateconsulting/web-channel micro-fabric-ux mhva-lugares-app rpdfviwer live-localizer material-components-elm-js-imports l2t-fab-footer @things-real/shell @teipublisher/pb-components asg-small-event-template f-paper-spinner-fab @spriteful/spriteful-fancy-header-example @spriteful/app-account @spriteful/dhg-card @spriteful/fancy-header-example @spriteful/spriteful-account @spriteful/meta-waves-elements @spriteful/asg-event-shared-elements @spriteful/asg-search @spriteful/asg-shop-card-details @spriteful/asg-small-event-template @smyd/app-shell @smyd/asg-event-shared-elements @smyd/asg-search @smyd/asg-shop-card-details @smyd/dhg-elements @smyd/scroll-fab

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

9 years ago

9 years ago

9 years ago