sp-meter

NPM

0.44.0

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API Changelog

Attributes and Properties #

Property Attribute Type Default Description label label string '' progress progress number 0 sideLabel side-label boolean false static static 'white' | undefined variant variant MeterVariants The variant applies specific styling when set to `negative`, `positive`, `notice` `variant` attribute is removed when not matching one of the above.

Slots #

Name Description default slot text labeling the Meter

0.44.0 (2024-07-15) #

Note: Version bump only for package @spectrum-web-components/meter

0.43.0 (2024-06-11) #

Note: Version bump only for package @spectrum-web-components/meter

0.42.5 (2024-05-24) #

Note: Version bump only for package @spectrum-web-components/meter

0.42.4 (2024-05-14) #

Note: Version bump only for package @spectrum-web-components/meter

0.42.3 (2024-05-01) #

Note: Version bump only for package @spectrum-web-components/meter

0.42.2 (2024-04-03) #

Note: Version bump only for package @spectrum-web-components/meter

0.42.1 (2024-04-02) #

Note: Version bump only for package @spectrum-web-components/meter

0.42.0 (2024-03-19) #

Bug Fixes #

  • styles, theme: surface exports that omit Spectrum Vars proactively (#4142) (5b524c1)

Features #

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05) #

Note: Version bump only for package @spectrum-web-components/meter

0.41.1 (2024-02-22) #

Note: Version bump only for package @spectrum-web-components/meter

0.41.0 (2024-02-13) #

Note: Version bump only for package @spectrum-web-components/meter

0.40.5 (2024-02-05) #

Note: Version bump only for package @spectrum-web-components/meter

0.40.4 (2024-01-29) #

Note: Version bump only for package @spectrum-web-components/meter

0.40.3 (2024-01-11) #

Bug Fixes #

  • button: adds pending button, fixes #3162 (#3163) (71254ec)

0.40.2 (2023-12-18) #

Note: Version bump only for package @spectrum-web-components/meter

0.40.1 (2023-12-05) #

Note: Version bump only for package @spectrum-web-components/meter

0.40.0 (2023-11-16) #

Note: Version bump only for package @spectrum-web-components/meter

0.39.4 (2023-11-02) #

Note: Version bump only for package @spectrum-web-components/meter

0.39.3 (2023-10-18) #

Note: Version bump only for package @spectrum-web-components/meter

0.39.2 (2023-10-13) #

Bug Fixes #

  • update deps graph, update link docs (#3709) (2deb284)

0.39.1 (2023-10-06) #

Note: Version bump only for package @spectrum-web-components/meter

0.39.0 (2023-09-25) #

Features #

  • meter: add "variant" (coalescing various boolean attributes) and remove "over-background" attributes (#3514) (40e5f8a)

0.38.0 (2023-09-05) #

Note: Version bump only for package @spectrum-web-components/meter

0.37.0 (2023-08-18) #

Note: Version bump only for package @spectrum-web-components/meter

0.36.0 (2023-08-18) #

Note: Version bump only for package @spectrum-web-components/meter

0.35.0 (2023-07-31) #

Bug Fixes #

  • meter, progress-bar, progress-circle: use innerText when label is not provided (#3483) (59358c7)
  • meter: added role meter progressbar in meter component (#3459) (d2eccef)

0.34.0 (2023-07-11) #

Note: Version bump only for package @spectrum-web-components/meter

0.33.2 (2023-06-14) #

Note: Version bump only for package @spectrum-web-components/meter

0.33.0 (2023-06-08) #

Note: Version bump only for package @spectrum-web-components/meter

0.32.0 (2023-06-01) #

Note: Version bump only for package @spectrum-web-components/meter

0.31.0 (2023-05-17) #

Bug Fixes #

  • meter,progress-bar: add i18n to progress delivery (c7e4020)

0.30.0 (2023-05-03) #

Bug Fixes #

  • address a11y issues raised by updating our dependencies (4f06477)
  • meter: remove comment (27687ec)
  • stop merging selectors in a way that alters the cascade (369388f)
  • update export patterns (b2da444)
  • update to latest spectrum-css packages (a5ca19f)
  • use ObserveSlotText mixin to prevent white space from overriding label attribute (610fb4b)

Features #

  • action-button: add action button pattern (03ac00a)
  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • apply sizedMixin for t-shirt sizing (d7b63fb)
  • include all Dev Mode files in side effects (f70817c)
  • meter: add meter pattern (fa092ba)
  • meter: update spectrum css input (683bb1a)
  • progress-bar: use core tokens (540552e)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • tabs: add sp-tab-panel element (b17d276)
  • use latest exports specification (a7ecf4b)
  • use SixedMixin to manage "size" property (8819821)

0.8.4 (2023-04-24) #

Note: Version bump only for package @spectrum-web-components/meter

0.8.3 (2023-04-05) #

Note: Version bump only for package @spectrum-web-components/meter

0.8.2 (2023-03-22) #

Note: Version bump only for package @spectrum-web-components/meter

0.8.1 (2023-03-08) #

Note: Version bump only for package @spectrum-web-components/meter

0.8.0 (2023-02-08) #

Features #

  • progress-bar: use core tokens (540552e)

0.7.8 (2023-01-23) #

Note: Version bump only for package @spectrum-web-components/meter

0.7.7 (2023-01-09) #

Note: Version bump only for package @spectrum-web-components/meter

0.7.6 (2022-12-08) #

Note: Version bump only for package @spectrum-web-components/meter

0.7.5 (2022-11-21) #

Note: Version bump only for package @spectrum-web-components/meter

0.7.4 (2022-11-14) #

Note: Version bump only for package @spectrum-web-components/meter

0.7.3 (2022-10-28) #

Note: Version bump only for package @spectrum-web-components/meter

0.7.2 (2022-10-17) #

Note: Version bump only for package @spectrum-web-components/meter

0.7.1 (2022-10-10) #

Note: Version bump only for package @spectrum-web-components/meter

0.7.0 (2022-08-09) #

Features #

  • include all Dev Mode files in side effects (f70817c)

0.6.14 (2022-08-04) #

Note: Version bump only for package @spectrum-web-components/meter

0.6.13 (2022-07-18) #

Note: Version bump only for package @spectrum-web-components/meter

0.6.12 (2022-06-29) #

Note: Version bump only for package @spectrum-web-components/meter

0.6.11 (2022-06-07) #

Note: Version bump only for package @spectrum-web-components/meter

0.6.10 (2022-05-27) #

Note: Version bump only for package @spectrum-web-components/meter

0.6.9 (2022-05-12) #

Note: Version bump only for package @spectrum-web-components/meter

0.6.8 (2022-04-21) #

Note: Version bump only for package @spectrum-web-components/meter

0.6.7 (2022-03-30) #

Note: Version bump only for package @spectrum-web-components/meter

0.6.6 (2022-03-08) #

Note: Version bump only for package @spectrum-web-components/meter

0.6.5 (2022-03-04) #

Note: Version bump only for package @spectrum-web-components/meter

0.6.4 (2022-02-22) #

Note: Version bump only for package @spectrum-web-components/meter

0.6.3 (2022-01-26) #

Note: Version bump only for package @spectrum-web-components/meter

0.6.2 (2022-01-07) #

Note: Version bump only for package @spectrum-web-components/meter

0.6.1 (2021-12-13) #

Note: Version bump only for package @spectrum-web-components/meter

0.6.0 (2021-11-08) #

Note: Version bump only for package @spectrum-web-components/meter

0.5.1 (2021-11-08) #

Note: Version bump only for package @spectrum-web-components/meter

0.5.0 (2021-11-02) #

Features #

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.4.10 (2021-10-12) #

Note: Version bump only for package @spectrum-web-components/meter

0.4.9 (2021-09-20) #

Note: Version bump only for package @spectrum-web-components/meter

0.4.8 (2021-09-13) #

Note: Version bump only for package @spectrum-web-components/meter

0.4.7 (2021-08-24) #

Note: Version bump only for package @spectrum-web-components/meter

0.4.6 (2021-08-17) #

Note: Version bump only for package @spectrum-web-components/meter

0.4.5 (2021-08-03) #

Note: Version bump only for package @spectrum-web-components/meter

0.4.4 (2021-07-22) #

Note: Version bump only for package @spectrum-web-components/meter

0.4.3 (2021-07-01) #

Note: Version bump only for package @spectrum-web-components/meter

0.4.2 (2021-06-16) #

Note: Version bump only for package @spectrum-web-components/meter

0.4.1 (2021-06-07) #

Bug Fixes #

  • use ObserveSlotText mixin to prevent white space from overriding label attribute (610fb4b)

0.4.0 (2021-05-24) #

Features #

  • tabs: add sp-tab-panel element (b17d276)

0.3.7 (2021-05-12) #

Note: Version bump only for package @spectrum-web-components/meter

0.3.6 (2021-04-15) #

Note: Version bump only for package @spectrum-web-components/meter

0.3.5 (2021-04-09) #

Note: Version bump only for package @spectrum-web-components/meter

0.3.4 (2021-03-29) #

Note: Version bump only for package @spectrum-web-components/meter

0.3.3 (2021-03-22) #

Note: Version bump only for package @spectrum-web-components/meter

0.3.2 (2021-03-22) #

Note: Version bump only for package @spectrum-web-components/meter

0.3.1 (2021-03-05) #

Note: Version bump only for package @spectrum-web-components/meter

0.3.0 (2021-03-04) #

Features #

  • use latest exports specification (a7ecf4b)

0.2.3 (2021-02-11) #

Bug Fixes #

  • update to latest spectrum-css packages (a5ca19f)

0.2.2 (2021-02-02) #

Note: Version bump only for package @spectrum-web-components/meter

0.2.1 (2021-01-28) #

Note: Version bump only for package @spectrum-web-components/meter

0.2.0 (2021-01-21) #

Bug Fixes #

  • address a11y issues raised by updating our dependencies (4f06477)
  • stop merging selectors in a way that alters the cascade (369388f)
  • update export patterns (b2da444)
  • meter: remove comment (27687ec)

Features #

  • apply sizedMixin for t-shirt sizing (d7b63fb)
  • use SixedMixin to manage "size" property (8819821)
  • action-button: add action button pattern (03ac00a)
  • meter: add meter pattern (fa092ba)
  • meter: update spectrum css input (683bb1a)

0.1.0 (2021-01-13) #

Bug Fixes #

  • stop merging selectors in a way that alters the cascade (369388f)
  • update export patterns (b2da444)
  • meter: remove comment (27687ec)

Features #

  • apply sizedMixin for t-shirt sizing (d7b63fb)
  • use SixedMixin to manage "size" property (8819821)
  • action-button: add action button pattern (03ac00a)
  • meter: add meter pattern (fa092ba)
  • meter: update spectrum css input (683bb1a)

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 #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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 #

Small 
<sp-meter size="s" progress="71">Tasks Completed</sp-meter>
 Medium 
<sp-meter size="m" progress="71">Tasks Completed</sp-meter>
 Large 
<sp-meter size="l" progress="71">Tasks Completed</sp-meter>
 Extra Large 
<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>