Directory

← Back

nebula-style-attributes-behavior

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

Author

Rating

Popularity

<100

[ 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

nebula-style-attributes-behavior - Vaadin Add-on Directory

A Polymer behavior to update CSS variables from custom element attributes. nebula-style-attributes-behavior - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/arsnebula/nebula-style-attributes-behavior](https://github.com//arsnebula/nebula-style-attributes-behavior/blob/v1.1.1/README.md) on 2019-05-22 ]** [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/arsnebula/nebula-style-attributes-behavior) [![Build Status](https://saucelabs.com/browser-matrix/arsnebula.svg)](https://saucelabs.com/beta/builds/f51fd687cfe84ca6bbdf7d1d24bccb02) # \ A [Polymer](https://www.polymer-project.org) behavior to update CSS variables from custom element attributes. ## Installation ``` $ bower install -S arsnebula/nebula-style-attributes-behavior ``` ## Usage Import the package behavior: ```sh ``` 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. ```html ``` The element can now be styled using attributes. ```html ``` *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](/CHANGELOG.md) ## License See [LICENSE](/LICENSE.md)
Online