An `<sp-meter>` is a visual representation of a quantity or achievement. The meter's progress is determined by user actions, rather than system actions.
npm install @spectrum-web-components/meterAn
``bash`
yarn add @spectrum-web-components/meter
Import the side-effectful registration of via:
`javascript`
import '@spectrum-web-components/meter/sp-meter.js';
When looking to leverage the Meter base class as a type and/or for extension purposes, do so via:
`javascript`
import { Meter } from '@spectrum-web-components/meter';
The meter consists of several key parts:
- A label that describes what is being measured
- A progress track showing the total possible range
- A fill bar indicating the current progress
- A percentage value showing the numeric progress
`html`
#### Label
The label is the text that describes what is being measured. It can be provided either through the default slot or the label attribute.
`html`
#### Sizes
`html`
`html`
`html`
`html`
#### Variants
The meter supports several variants to convey different semantic meanings:
By default, the informative variant can be used to represent a neutral or non-semantic value, such as the number of tutorials completed.
`html`
The positive variant can be used to represent a positive semantic value, such as when there's a lot of space remaining.
Use value variant="positive" to define a positive variant.
`html`
The notice variant can be used to warn users about a situation that may need to be addressed soon, such as when space remaining is becoming limited.
Use value variant="notice" to define a notice variant.
`html`
The negative variant can be used to warn users about a critical situation that needs their urgent attention, such as when space remaining is becoming very limited.
Use value variant="negative" to define a negative variant.
`html`
#### Label Position
A meter can be delivered with its labeling displayed above its visual indicator or to either side. Use the boolean side-label attribute to define where this content should appear.
`html`
The element is rendered with role="meter progressbar" to ensure proper semantics for assistive technologies. The current progress value is set as a percentager via the progress attribute and is exposed to assistive technology via aria-valuenow.
`html`
#### Include a label
A meter is required to have either a visible text label or a label` attribute.
#### Don't override color
The meter's variants provide semantic meaning through both color and ARIA attributes, ensuring that information is not conveyed through color alone. The progress track and fill maintain sufficient contrast for visibility.