<dy-meter>
A component for displaying measurements within a known range. It can be used to show progress, usage levels, or any other metric that has a minimum and maximum value, with support for different layouts and color schemes.
Example
Loading...
<dy-meter
.value=${30}
.label=${"Label"}
.valueLabel=${"30%"}
.layout=${"flat"}></dy-meter> <dy-meter
.max=${30}
.value=${20}
.color=${"negative"}
.label=${"Label"}
.valueLabel=${"66%"}></dy-meter>
API
Shadow DOM; Extends GemElement
Instance Properties
| Property(Attribute) | Reactive | Type | Description |
|---|---|---|---|
value(value) |
Yes | number |
range: 0-100 |
max(max) |
Yes | number |
|
min(min) |
Yes | number |
|
color(color) |
Yes | StringList<'positive' | 'informative' | 'negative' | 'notice'> |
|
layout(layout) |
Yes | 'stack' | 'flat' |
|
label(label) |
Yes | string |
|
valueLabel(value-label) |
Yes | StringList<'percentage'> |
|
calculateColor |
Yes | () => string |
Other
| Type | Value |
|---|---|
| Slot | label, value-label |