moonstone/ProgressBar

Provides Moonstone-themed progress bar component.

import ProgressBar from '@enact/moonstone/ProgressBar';

Members

ProgressBarComponent

The ready-to-use Moonstone-styled ProgressBar.

import ProgressBar from '@enact/moonstone/ProgressBar';

ProgressBarBaseComponent

Renders a moonstone-styled progress bar.

import {ProgressBarBase} from '@enact/moonstone/ProgressBar';
Properties
css
Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal Elements and states of this component.

The following classes are supported:

  • progressBar - The root component class

highlighted
Boolean

Highlights the filled portion.

orientation
String

Sets the orientation of the slider.

  • Values: 'horizontal', 'vertical'

Default: 'horizontal'
progress
Number

A number between 0 and 1 indicating the proportion of the filled portion of the bar.

Default: 0
tooltip
BooleanComponentElement

Enables the built-in tooltip.

To customize the tooltip, pass either a custom tooltip component or an instance of ProgressBarTooltip with additional props configured.

The provided component will receive the following props from ProgressBar:

  • orientation - The value of orientation

  • percent - Always true indicating the value should be presented as a percentage rather than an absolute value

  • progress - The value as a proportion between min and max

  • visible - Always true indicating that the tooltip should be visible

Usage:

<ProgressBar
  tooltip={
    <ProgressBarTooltip side="after" />
  }
/>

The tooltip may also be passed as a child via the "tooltip" slot. See Slottable for more information on how slots can be used.

Usage:

<ProgressBar>
  <ProgressBarTooltip side="after" />
</ProgressBar>

ProgressBarDecoratorHigher-Order Component

Moonstone-specific behaviors to apply to ProgressBar.

import {ProgressBarDecorator} from '@enact/moonstone/ProgressBar';

ProgressBarTooltipComponent

A Tooltip specifically adapted for use with IncrementSlider, ProgressBar, or Slider.

import {ProgressBarTooltip} from '@enact/moonstone/ProgressBar';
Properties
orientation
String

Sets the orientation of the tooltip based on the orientation of the bar.

'vertical' sends the tooltip to one of the sides, 'horizontal' positions it above the bar.

  • Values: 'horizontal', 'vertical'

Default: 'horizontal'
percent
Boolean

Displays the value as a percentage.

Default: false
proportion
Number

The proportion of the filled part of the bar.

  • Should be a number between 0 and 1.

Default: 0
side
String

Specify where the tooltip should appear in relation to the ProgressBar/Slider bar.

Allowed values are:

  • 'after' renders below a horizontal ProgressBar/Slider and after (respecting the current locale's text direction) a vertical ProgressBar/Slider

  • 'before' renders above a horizontal ProgressBar/Slider and before (respecting the current locale's text direction) a vertical ProgressBar/Slider

  • 'left' renders to the left of a vertical ProgressBar/Slider regardless of locale

  • 'right' renders to the right of a vertical ProgressBar/Slider regardless of locale

Default: 'before'
visible
Boolean

Visibility of the tooltip

Default: false
ArrayBooleanFunctionModuleNumberObjectString