limestone/ProgressBar

Provides Limestone-themed progress bar component.

Loading Live Preview

Import Usage

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

Members

ProgressBar   Component

The ready-to-use Limestone-styled ProgressBar.

Import Usage

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

Extends: limestone/ProgressBarlimestone/ProgressBar.ProgressBarBase
Wrapped with: limestone/ProgressBarlimestone/ProgressBar.ProgressBarDecorator

ProgressBarBase   Component

Renders a limestone-styled progress bar.

Import Usage

import {ProgressBarBase} from '@enact/limestone/ProgressBar';

Properties

backgroundProgress

Number

The proportion of the loaded portion of the progress bar.

• Valid values are between 0 and 1.

Default: 0

---

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

• radial - Applied when orientation is 'radial'

---

highlighted

Boolean

Highlights the filled portion.

---

orientation

'horizontal''vertical''radial'

The orientation of the slider.

Default: 'horizontal'

---

progress

Number

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

Default: 0

---

showAnchor

Boolean

Displays an anchor at progressAnchor.

---

tooltip

BooleanComponentElement

Enables the built-in tooltip.

To customize the tooltip, pass either a custom tooltip component or an instance of limestone/ProgressBarlimestone/ProgressBar.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 position="after" />
  }
/>

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

Usage:

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

ProgressBarDecorator   Higher-Order Component

Limestone-specific behaviors to apply to limestone/ProgressBarlimestone/ProgressBar.ProgressBarBase.

Import Usage

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

Includes: limestone/Skinnablelimestone/Skinnable.Skinnable

ProgressBarTooltip   Component

A limestone/TooltipDecoratorlimestone/TooltipDecorator.Tooltip specifically adapted for use with limestone/ProgressBarlimestone/ProgressBar.ProgressBar or limestone/Sliderlimestone/Slider.Slider.

Import Usage

import {ProgressBarTooltip} from '@enact/limestone/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:

• tooltip - The root component class

---

orientation

'horizontal''vertical''radial'

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, 'radial' can position it on all sides.

Default: 'horizontal'

---

percent

Boolean

Displays the value as a percentage.

Default: false

---

position

'above''above before''above left''above after''above center''above right''below''below left''below before''below center''below right''below after''left''before''right''after'

Position of the tooltip with respect to the progress bar.

• For orientation="horizontal" or orientation="radial" progress bars, the default value is 'above'.

• For orientation="vertical" progress bars, the default value is 'before'.

When using 'before' or 'after' alone or in any of the below combinations, 'before' will position the tooltip on the side of the current locale's text directionality. In LTR locales, it will be on the left; in RTL locales, it will be on the right. Similarly, 'after' will position the tooltip on the opposite side: the right side for LTR and left for RTL.

Valid values when orientation="horizontal" or orientation="radial"

Value	Tooltip Direction
'above'	Above component, flowing to the nearest end
'above left'	Above component, flowing to the left
'above before'	Above component, flowing to the start of text
'above center'	Above component, flowing to the center
'above right'	Above component, flowing to the right
'above after'	Above component, flowing to the end of text
'below'	Below component, flowing to the nearest end
'below left'	Below component, flowing to the left
'below before'	Below component, flowing to the start of text
'below center'	Below component, flowing to the center
'below right'	Below component, flowing to the right
'below after'	Below component, flowing to the end of text

Valid values when orientation="vertical" or orientation="radial"

Value	Tooltip Direction
'left'	Left of the component, contents middle aligned
'before'	Start of text side of the component, contents middle aligned
'right'	right of the component, contents middle aligned
'after'	End of text side of the component, contents middle aligned

---

proportion

Number

The proportion of the filled part of the bar.

• Should be a number between 0 and 1.

Default: 0

---

visible

Boolean

Visibility of the tooltip

Default: false