Skip to content

Rating - Web Component โ€‹

Browser support โ€‹

Detected engine: ย 

  • Chromium

  • Webkit

  • Gecko

Parameters โ€‹

The Web component uses the <z-rating> tag:

The parametrization of the component can be done with the following custom HTML params:

NameTypeDescription
valuenumberThe current score of the rating. It can be a number between 0 and 5.
readonly
(optional)
booleanIf `true`, the rating will be displayed as a score.
disabled
(optional)
booleanBlocks the interaction with the input component.
show-score
(optional)
booleanIf `true`, the rating will be displayed with a score.

The events emitted from the component are:

NamePayloadDescription
onchangenumberReturns the new value of the "value" attribute

value โ€‹

The value parameter is used to set the value of the rating.

readonly โ€‹

The readonly parameter is used to set the rating in a read-only state.

disabled โ€‹

The disabled parameter is used to block the interaction with the component.

show-score โ€‹

The show-score parameter is used to display the score of the rating.

Playground โ€‹

Customization โ€‹

HTML Examples โ€‹

Imports
html
<link rel="stylesheet" href="/0.4.5/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.5/@zurich/web-components/rating.js"></script>
Code
html
<z-rating></z-rating>