createProgressbar(
props?):ProgressbarWidget
Create a Progressbar with given config props
a ProgressbarWidget
getProgressbarDefaultConfig():
ProgressbarProps
Retrieve a shallow copy of the default Progressbar config
the default Progressbar config
Progressbar(
props):Element
Progressbar component that utilizes the useWidgetWithConfig hook to create a progress bar widget.
The properties to configure the progress bar.
Element
A div element containing the progress bar with appropriate ARIA directives and slot content.
Represents the context for a Progressbar widget. This interface is used to define the context object that is passed to the Progressbar widget.
api:
object
all the api functions to interact with the widget
directives:
ProgressbarDirectives
directives to be used on html elements in the template of the widget or in the slots
state:
ProgressbarState
the state of the widget
ProgressbarDefaultSlotStructure(
slotContext):Element
Renders a progress bar component with customizable appearance and behavior.
The context containing the state and properties for the progress bar.
Element
The rendered progress bar component.
Interface representing directives for a progress bar component.
ariaDirective:
Directive
A directive to be applied to the main container that handles aria attributes.
Interface representing the properties for the Progressbar component.
animated:
boolean
If true, animates a striped progressbar.
Takes effect only for browsers supporting CSS3 animations, and if striped is true.
false
ariaLabel:
string
The aria label.
'Progressbar'
ariaValueTextFn: (
value,minimum,maximum) =>undefined|string
Return the value for the 'aria-valuetext' attribute.
number
current value
number
minimum value
number
maximum value
undefined | string
() => undefinedchildren:
SlotContent<ProgressbarContext>
Label of the progress.
className:
string
CSS classes to be applied on the widget main container
''
height:
string
Height of the progressbar, can be any valid css height value.
''
max:
number
The maximum value.
100
min:
number
The minimum value.
0
striped:
boolean
If true, shows a striped progressbar.
false
structure:
SlotContent<ProgressbarContext>
Global template for the Progressbar.
type:
undefined|BSContextualClass
Type of the progressbar, following bootstrap types.
value:
number
The current value.
0
Represents the state of a Progressbar component.
animated:
boolean
If true, animates a striped progressbar.
Takes effect only for browsers supporting CSS3 animations, and if striped is true.
false
ariaLabel:
string
The aria label.
'Progressbar'
ariaValueText:
undefined|string
The aria value text.
children:
SlotContent<ProgressbarContext>
Label of the progress.
className:
string
CSS classes to be applied on the widget main container
''
finished:
boolean
true if the value has reached its maximum value.
height:
string
Height of the progressbar, can be any valid css height value.
''
max:
number
The maximum value.
100
min:
number
The minimum value.
0
percentage:
number
Percentage of completion.
started:
boolean
true if the value is above its minimum value.
striped:
boolean
If true, shows a striped progressbar.
false
structure:
SlotContent<ProgressbarContext>
Global template for the Progressbar.
type:
undefined|BSContextualClass
Type of the progressbar, following bootstrap types.
value:
number
The current value.
0
ProgressbarWidget:
Widget<ProgressbarProps,ProgressbarState,object,ProgressbarDirectives>
Represents a Progressbar widget.
This type defines the structure of a Progressbar widget, including its properties, state, and directives.