nebula-style-attributes-behavior:
[ This description is mirrored from README.md at github.com/arsnebula/nebula-style-attributes-behavior on 2019-05-22 ]
<nebula-style-attributes-behavior>
A Polymer behavior to update CSS variables from custom element attributes.
Installation
$ bower install -S arsnebula/nebula-style-attributes-behavior
Usage
Import the package behavior:
<link rel="import" href="/bower_components/nebula-style-attributes-behavior/nebula-style-attributes-behavior.html">
Add a styleAttributes or _styleAttributes property to the element to define how attributes are mapped to CSS variables. When the attribute is changed, the CSS variable will be updated.
<dom-module id="my-element">
<template>
<style>
:host {
display: inline-block;
color: var(--my-element-color, black);
background-color: var(--my-element-background-color, silver);
}
</style>
<slot></slot>
</template>
<script>
Polymer({
is: 'my-element',
behaviors: [
Nebula.StyleAttributesBehavior
],
_styleAttributes: {
'color': '--my-element-color',
'background-color': '--my-element-background-color'
}
})
</script>
</dom-module>
The element can now be styled using attributes.
<my-element color="white"></my-element>
For more information on element properties and methods see the element API documentation.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
Change Log
See CHANGELOG
License
See LICENSE