valle-fab
Awesome valle FAB Web Component using Polymer 2x
[ This description is mirrored from README.md at github.com/valleweb/vsc-fab-button on 2019-01-07 ]
valle-fab
Awesome valle material design: Floating Action Button (FAB).
How to install and use:
1 - Install the element using Bower:
$ bower install valle-fab --save
2 - Import the element:
<link rel="import" href="bower_components/valle-fab/valle-fab.html">
3 - Start using it!
<valle-fab></valle-fab>
<valle-fab disabled></valle-fab>
<valle-fab mini></valle-fab>
<valle-fab toggle></valle-fab>
<valle-fab
icon="https://uploaddeimagens.com.br/images/001/071/867/full/iconmonstr-fast-food-3-32.png">
</valle-fab>
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) |
sloted |
Boolean | false |
Allow inline icon (slot) |
Styling
The following custom properties and mixins are available for styling:
| Custom property | Default | Description |
|---|---|---|
| --valle-fab-color | #ff6d00 | Button background color |
| --valle-fab-size | 56px | Button size (width and height) |
| --valle-fab-mini-size | 40px | Button mini size (width and height) |
| --valle-fab-icon-size | 24px | Icon size (width and height) |
| --valle-fab-default-icon-color | #ffffff | Default icon background color |
| --valle-fab-pressed-coulor | #ff0101 | Pressed button background color (toggle) |
Browser Support
Using the webcomponents.js:
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11+ | Latest ✔ |
Development
1 - Install Bower & Polymer-CLI:
$ [sudo] yarn global add bower polymer-cli
2 - Install local dependencies:
$ bower install
3 - Start the development server:
$ polymer serve
Go to localhost:8080/components/valle-fab/
Tests
Linting
Linting with eslint:
$ [sudo] yarn global add eslint
$ [sudo] yarn global add eslint-plugin-html
$ eslint *.html
Linting with polylint:
$ polymer lint
Unit tests
Install the Web Component Tester (WCT) test runner:
$ [sudo] yarn global add 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
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
Polymer/polymer#^2.0.0
- Released
- 2018-08-17
- Maturity
- IMPORTED
- License
- Other
Compatibility
- Framework
- Polymer 2.0+
- Browser
- Browser Independent