Meter

Updated:

A component that provides bar type meter.

Properties

The q2-meter element has one or more properties that support text localization. Those properties are indicated by the localizable badge in the description.

Learn more about properties.

animated

Shows loading animation for bars, default is true.

completedLabel
completed-label

Defines the label for the completed bar, which appears at the bottom in the legend section.

Localizable
completedValue
completed-value

Defines the value for the completed bar.

description

Defines the description for the meter, which appears at the top just below the label.

Localizable
dotted

Shows a circle shaped dot indicator on completed bar, default is true.

label

Defines the label for the meter, which appears at the top.

Localizable
maxLabel
max-label

Defines the label for the base bar, which appears at the bottom in the legend.

Localizable
maxValue
max-value

Defines the value for the base bar.

segments

Shows thin tick bars based on the number of segments provided.

suggestedLabel
suggested-label

Defines the label for the suggested bar, which appears at the bottom in the legend.

Localizable
suggestedValue
suggested-value

Defines the value for the suggested bar.

tooltipCompleted
tooltip-completed

Defines custom text for the completed bar tooltip.

Localizable
tooltipSuggested
tooltip-suggested

Defines custom text for the suggested bar tooltip.

Localizable

Accessibility Report

Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

The following CSS variables are available to override the default theme styles of the q2-metercomponent.

Dependencies

Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!

  • q2-tooltip