A (vanilla) Web Component to show an EU Energy Label.
Example how to create a "Directive 2010/30/EU" energy label (colors need adjustment, see next demo):
<div style="width:300px">
<eu-energy-label efficiency-classes="A+++,A++,A+,A,B,C,D"
selected-class="A++">
</eu-energy-label>
</div>Example of of arbitrary label content and using the CSS custom properties:
<div style="width:300px">
<style type="text/css" scoped>
eu-energy-label {
--efficiency-class-background-1: linear-gradient(#9aff9a, #0f0);
--efficiency-class-background-2: linear-gradient(#ffff9a, #ff0);
--efficiency-class-background-3: linear-gradient(#d6485b, #f00);
--selected-efficiency-background: linear-gradient(#eee, #bbb);
}
</style>
<eu-energy-label efficiency-classes="green,yellow,red"
selected-class="green">
</eu-energy-label>
</div>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.
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.
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.
- 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
MIT License