sandstone/ Progress Bar
Provides Sandstone-themed progress bar component.
import ProgressBar from '@enact/sandstone/ProgressBar';
Members
ProgressBarComponent
The ready-to-use Sandstone-styled ProgressBar.
import ProgressBar from '@enact/sandstone/ProgressBar';
ProgressBarBaseComponent
Renders a sandstone-styled progress bar.
import {ProgressBarBase} from '@enact/sandstone/ProgressBar';
Properties
The proportion of the loaded portion of the progress bar.
Valid values are between
0
and1
.
Default: 0Customizes 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 classradial
- Applied whenorientation
is'radial'
Highlights the filled portion.
The orientation of the slider.
Default: 'horizontal'A number between
0
and1
indicating the proportion of the filled portion of the bar.Default: 0Displays an anchor at
progressAnchor
.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 oforientation
percent
- Alwaystrue
indicating the value should be presented as a percentage rather than an absolute valueprogress
- Thevalue
as a proportion betweenmin
andmax
visible
- Alwaystrue
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 Slottable for more information on how slots can be used.Usage:
<ProgressBar> <ProgressBarTooltip position="after" /> </ProgressBar>
ProgressBarDecoratorHigher-Order Component
Sandstone-specific behaviors to apply to ProgressBar.
import {ProgressBarDecorator} from '@enact/sandstone/ProgressBar';
ProgressBarTooltipComponent
A Tooltip specifically adapted for use with ProgressBar or Slider.
import {ProgressBarTooltip} from '@enact/sandstone/ProgressBar';
Properties
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
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'Displays the value as a percentage.
Default: false- position
Position of the tooltip with respect to the progress bar.
For
orientation="horizontal"
ororientation="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"
ororientation="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"
ororientation="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 The proportion of the filled part of the bar.
Should be a number between 0 and 1.
Default: 0Visibility of the tooltip
Default: false