@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/iron-flex-layout @polymer/iron-icon @polymer/paper-behaviors @polymer/paper-styles @polymer/polymer

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

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago