Directory

← Back

score-element

A web component that is used to pick a numeric score value from a predefined range.

Author

Contributors

Rating

[ This description is mirrored from README.md at github.com/Protoss78/score-element on 2019-05-22 ]

Published on webcomponents.org

score-element

A web component that I mainly use to pick a numeric score value from a predefined numeric range. The numeric range can be set by choosing a start and an end value. You can also define a step size (default is 1) and decimal precision (default is 0). The selected value can be get or set via the selected property. It uses the paper-button-group web component to generate the required paper-buttons. One button per calculated step is created.

Example:

<score-element selected="{{select1}}"></score-element>
<score-element start="0.5" end="2.0" step="0.1" decimals="1"></score-element>
<score-element class="green" start="0.5" end="2.0" step="0.1" decimals="1" ltr></score-element>

Available Style Variables:

--button-score-color:         Defines the background color of the button
--text-score-color:           Defines the text color of the button
--hover-score-color:          Defines the background color of the button in hover state
--hover-text-score-color:     Defines the text color of the button in hover state
--selected-score-color:       Defines the background color of the button in selected state
--selected--text-score-color: Defines the text color of the button in hover state

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.9 - 2
  • paper-button#PolymerElements/paper-button#1 - 2
  • paper-button-group#Protoss78/paper-button-group#^1.0.0
Released
2017-05-28
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 2.0+
Polymer 1.0+ in 0.0.5
Browser
Browser Independent
Online