Directory

← Back

nebula-style-attributes-behavior

A Polymer behavior to update CSS variables from custom element attributes.

Author

Contributors

Rating

[ This description is mirrored from README.md at github.com/arsnebula/nebula-style-attributes-behavior on 2019-05-22 ]

Published on webcomponents.org

Build Status

<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

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Change Log

See CHANGELOG

License

See LICENSE

Compatibility

(Loading compatibility data...)

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/polymer#^1.7.1
Released
2017-02-05
Maturity
IMPORTED
License
ISC License

Compatibility

Framework
Polymer 1.0+
Browser
Browser Independent
Online