@valle/valle-fab NPM

valle-fab

Awesome valle-fab element - web component using Polymer 3

How to install and use:

1 - Install the element using Yarn:

$ yarn add @valle/valle-fab

2 - Import the element:

<script type="module" src="node_modules/@valle/valle-fab/valle-fab.js"></script>

or in your javascript file

import "@valle/valle-fab/valle-fab.js";

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)