Awesome VSC FAB Web Component using Polymer 2x

[ This description is mirrored from README.md at github.com/valleweb/vsc-fab-button on 2018-01-17 ]

vsc-fab-button

Awesome VSC material design: Floating Action Button (FAB).

Travis CI Status Published on webcomponents.org

How to install and use:

1 - Install the element using Bower:

$ bower install vsc-fab-button --save

2 - Import the element:

<link rel="import" href="bower_components/vsc-fab-button/vsc-fab-button.html">

3 - Start using it!

<vsc-fab-button></vsc-fab-button>
<vsc-fab-button disabled></vsc-fab-button>
<vsc-fab-button mini></vsc-fab-button>
<vsc-fab-button toggle></vsc-fab-button>
<vsc-fab-button
  icon="https://uploaddeimagens.com.br/images/001/071/867/full/iconmonstr-fast-food-3-32.png">
</vsc-fab-button>

Properties

Property Type Default Description
icon String '' Icon url
mini Boolean false Allow mini size
disabled Boolean false Allow disabled state
elevation Number 1 Add material design elevation level (1-5)
label String '' Label for screen readers
toggle Boolean false Allow toggle mode
pressed Boolean false Set the pressed state (toggled)

Styling

The following custom properties and mixins are available for styling:

Custom property Default Description
--vsc-fab-button-color #ff6d00 Button background color
--vsc-fab-button-size 56px Button size (width and height)
--vsc-fab-button-mini-size 40px Button mini size (width and height)
--vsc-fab-button-icon-size 24px Icon size (width and height)
--vsc-fab-button-default-icon-color #ffffff Default icon background color
--vsc-fab-button-pressed-coulor #ff0101 Pressed button background color (toggle)

Browser Support

Using the webcomponents.js:

Chrome Opera Firefox Safari IE Edge
Latest ✔ Latest ✔ Latest ✔ Latest ✔ 11+ Latest ✔

Development

1 - Install Bower & Polymer-CLI:

$ [sudo] npm install -g bower polymer-cli

2 - Install local dependencies:

$ bower install

3 - Start the development server:

$ polymer serve

Go to localhost:8080/components/vsc-fab-button/

Tests

Linting

Linting with eslint:

$ [sudo] npm install -g eslint
$ [sudo] npm install -g eslint-plugin-html

$ eslint *.html

Linting with polylint:

$ polymer lint

Unit tests

Install the Web Component Tester (WCT) test runner:

$ [sudo] npm install -g web-component-tester

Run tests:

$ wct

Versioning

To keep better organization of releases we follow the Semantic Versioning 2.0.0 guidelines.

Contributing

Find on our issues the next steps of the project ;)
Want to contribute? Follow these recommendations.

History

See Releases for detailed changelog.

License

MIT License © valleweb

Install

Link to this version
TestedReleased 16 October 2017Other
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
Release notes - Version 0.2.1

Dependencies

Polymer/polymer#^2.0.0