npm

@spectrum-web-components/meter
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

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>

Package Sidebar

Install

npm i @spectrum-web-components/meter

Weekly Downloads

2,930

Version

1.0.1

License

Apache-2.0

Unpacked Size

165 kB

Total Files

59

Last publish

Collaborators

  • caseyisonit
  • rubenc
  • pvashish
  • nikkimk
  • jnjosh
  • taratadobe
  • rajrock38
  • beeduul
  • jianliao79
  • hunterloftis
  • westbrook
  • benjamind
  • cuberoot