Gauge Percentage

Function

a!gaugePercentage( label, labelPosition, instructions, helpTooltip, percentage, primaryText, secondaryText, color, size, align, accessibilityText, showWhen, tooltip )

Displays the configured percentage of the gauge as an integer for use within the gauge field primaryText parameter.

See also: Gauge design guidance

Parameters

This component does not require any parameters. It captures the percentage value from its parent gauge and displays that value in the center, rounded to an integer. The below table is just for reference.

Name Keyword Types Description

Label

label

Text

Text to display as the field label.

Label Position

labelPosition

Text

Determines where the label appears. Valid values: “ABOVE” (default), “ADJACENT”, “JUSTIFIED”, “COLLAPSED”.

Instructions

instructions

Text

Supplemental text about this field.

Help Tooltip

helpTooltip

Text

Displays a help icon with the specified text as a tooltip. The help icon does not show when the label position is “COLLAPSED”.

Percentage

percentage

(Number (Decimal))

Number to display between 0 and 100.

Primary Text

primaryText

Any Type

Content to display on the first line inside the gauge. Create using plain text, a!gaugeIcon(), a!gaugePercentage(), or a!gaugeFraction().

Secondary Text

secondaryText

Text

Optional text to display on the second line inside the gauge.

Color

color

Text

Determines the color. Access the percentage using fv!percentage. Valid values: Any valid hex color or “ACCENT” (default), “POSITIVE”, “NEGATIVE”, “WARN”.

Size

size

Text

Determines the size of the gauge. Valid values: “SMALL”, “MEDIUM” (default), “LARGE”.

Align

align

Text

Determines alignment of the gauge. Valid values: “START”, “CENTER” (default), “END”.

Accessibility Text

accessibilityText

Text

Additional text to be announced by screen readers. Used only for accessibility; produces no visible change.

Visibility

showWhen

Boolean

Determines whether the component is displayed on the interface. When set to false, the component is hidden and is not evaluated. Default: true.

Tooltip

tooltip

Text

Text to display as a tooltip on the gauge.

Examples

Use the interactive editor below to test out your code:

Gauge with percentage

The following patterns include usage of the Gauge Percentage.

Open in Github Built: Mon, Nov 15, 2021 (03:03:53 PM)

On This Page

FEEDBACK