@spectrum-web-components/meter v0.42.2
Description
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.
Installation
yarn add @spectrum-web-components/meter
Import the side-effectful registration of <sp-meter>
via:
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:
import { Meter } from '@spectrum-web-components/meter';
Sizes
<sp-meter size="s" progress="71">Tasks Completed</sp-meter>
<sp-meter size="m" progress="71">Tasks Completed</sp-meter>
<sp-meter size="l" progress="71">Tasks Completed</sp-meter>
<sp-meter size="xl" progress="71">Tasks Completed</sp-meter>
Variants
Informative
By default, the informative variant can be used to represent a neutral or non-semantic value, such as the number of tutorials completed.
<sp-meter progress="50">Storage Space</sp-meter>
Positive
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.
<sp-meter variant="positive" progress="50">Storage Space</sp-meter>
Notice
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.
<sp-meter variant="notice" progress="73">Storage Space</sp-meter>
Negative
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.
<sp-meter variant="negative" progress="92">Storage Space</sp-meter>
Side Label
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.
<sp-meter side-label>Side Label</sp-meter>
27 days ago
28 days ago
1 month ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
5 months ago
9 months ago
6 months ago
9 months ago
9 months ago
10 months ago
9 months ago
9 months ago
9 months ago
8 months ago
9 months ago
10 months ago
9 months ago
9 months ago
7 months ago
7 months ago
9 months ago
6 months ago
6 months ago
7 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
11 months ago
12 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago