TobseF/valle-speed-dial

Awesome valle FAB with Speed Dial Web Component using Polymer 2x

valle-speed-dial

Awesome valle FAB with Speed Dial

How to install and use:

1 - Install the element using Bower:

$ bower install valle-speed-dial --save

2 - Import the elements:

<link rel="import" href="bower_components/valle-speed-dial/valle-speed-dial.html">
<link rel="import" href="bower_components/valle-speed-dial/valle-speed-dial-action.html">

3 - Start using it!

<valle-speed-dial backdrop>
  <valle-speed-dial-action label="copy" label-direction="left"></valle-speed-dial-action>
  <valle-speed-dial-action label="print" label-direction="left"></valle-speed-dial-action>
</valle-speed-dial>

<valle-speed-dial>

Properties

Property	Type	Default	Description
direction	String	up	Speed Dial direction (up / down / left / right)
backdrop	Boolean	false	Allow backdrop effect
label	String	''	Label for screen readers
icon	String	''	Custom icon url

Styling

The following custom properties and mixins are available for styling:

Custom property	Default	Description
--valle-speed-dial-fab-color	#00b0ba	Toggle button background color
--valle-speed-dial-pressed-color	#00676d	Toggle button background color (Pressed)
--valle-speed-dial-default-icon-color	#ffffff	Toggle button default icon color
--valle-speed-dial-backdrop-color	rgba(0,0,0,.8)	Backdrop color

<valle-speed-dial-action>

Properties

Property	Type	Default	Description
label-direction	String	''	Allow floating label (left / right)
label	String	''	Text for floating label and screen readers
icon	String	''	Custom icon url
sloted	Boolean	false	Allow inline icon (slot)

Styling

The following custom properties and mixins are available for styling:

Custom property	Default	Description
--valle-speed-dial-action-fab-color	#00b0ba	Mini button background color
--valle-speed-dial-action-default-icon-color	#ffffff	Mini button default icon color
--valle-speed-dial-action-label-bg-color	#f5f5f5	Float label background color
--valle-speed-dial-action-label-text-color	#000000	Float label text color
--valle-speed-dial-action-label	{}	Float label @apply mixin

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-speed-dial/

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

MIT License © valleweb