**[ This description is mirrored from README.md at [github.com/elvomka/eu-energy-label](https://github.com//elvomka/eu-energy-label/blob/1.0.3/README.md) on 2019-05-10 ]** # eu-energy-label A (vanilla) Web Component to show an EU Energy Label. [](https://www.webcomponents.org/element/elvomka/eu-energy-label) ## Demo Example how to create a "Directive 2010/30/EU" energy label (colors need adjustment, see next demo): ```html ``` Example of of arbitrary label content and using the CSS custom properties: ```html ``` ## Usage In order to use the `eu-energy-label`, you need to configure two parameters: * efficiency classes: The available energy efficiency classes to display * selected class: The selected (active) energy efficiency class to highlight These parameters can either be set via attribute- or property-value on the `eu-energy-label` instance. ### Attributes and properties To configure the available 'efficiency classes', use either the `efficiency-classes` attribute or the `efficiencyClasses` property and pass it a comma-separated list of labels for the efficiency classes you want to display. The order of the items in the comma-separated list will go from the top to the bottom of the efficiency scale. To configure the 'selected class' that will be highlighted, use the `selected-class` attribute or the `selectedClass` property and pass it a value that also exists in the 'efficiency classes' list. ### CSS custom properties The webcomponent exposes a number of CSS custom properties (variables) which allow to customize the look of the rendered energy efficiency label. For details, please have a look at the top of the file `eu-energy-label.html`. ## 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 ## License MIT License