Bootstrap

API progressbar

createProgressbar

function

createProgressbar(props?): ProgressbarWidget

Create a Progressbar with given config props

Parameters

props?: PropsConfig<ProgressbarProps>

Returns

ProgressbarWidget

a ProgressbarWidget


getProgressbarDefaultConfig

function

getProgressbarDefaultConfig(): ProgressbarProps

Retrieve a shallow copy of the default Progressbar config

Returns

ProgressbarProps

the default Progressbar config


Progressbar

function

Progressbar(props): Element

Progressbar component that utilizes the useWidgetWithConfig hook to create a progress bar widget.

Parameters

props: Partial<ProgressbarProps>

The properties to configure the progress bar.

Returns

Element

A div element containing the progress bar with appropriate ARIA directives and slot content.


ProgressbarContext

interface

Represents the context for a Progressbar widget. This interface is used to define the context object that is passed to the Progressbar widget.

Properties
api

api: object

all the api functions to interact with the widget


directives

directives: ProgressbarDirectives

directives to be used on html elements in the template of the widget or in the slots


state

state: ProgressbarState

the state of the widget


ProgressbarDefaultSlotStructure

function

ProgressbarDefaultSlotStructure(slotContext): Element

Renders a progress bar component with customizable appearance and behavior.

Parameters

slotContext: ProgressbarContext

The context containing the state and properties for the progress bar.

Returns

Element

The rendered progress bar component.


ProgressbarDirectives

interface

Interface representing directives for a progress bar component.

Properties
ariaDirective

ariaDirective: Directive

A directive to be applied to the main container that handles aria attributes.


ProgressbarProps

interface

Interface representing the properties for the Progressbar component.

Properties
animated

animated: boolean

If true, animates a striped progressbar. Takes effect only for browsers supporting CSS3 animations, and if striped is true.

Default Value

false


ariaLabel

ariaLabel: string

The aria label.

Default Value

'Progressbar'


ariaValueTextFn

ariaValueTextFn: (value, minimum, maximum) => undefined | string

Return the value for the 'aria-valuetext' attribute.

Parameters

value: number

current value

minimum: number

minimum value

maximum: number

maximum value

Returns

undefined | string

Default Value
() => undefined

children

children: SlotContent<ProgressbarContext>

Label of the progress.


className

className: string

CSS classes to be applied on the widget main container

Default Value

''


height

height: string

Height of the progressbar, can be any valid css height value.

Default Value

''


max

max: number

The maximum value.

Default Value

100


min

min: number

The minimum value.

Default Value

0


striped

striped: boolean

If true, shows a striped progressbar.

Default Value

false


structure

structure: SlotContent<ProgressbarContext>

Global template for the Progressbar.


type

type: undefined | BSContextualClass

Type of the progressbar, following bootstrap types.


value

value: number

The current value.

Default Value

0


ProgressbarState

interface

Represents the state of a Progressbar component.

Properties
animated

animated: boolean

If true, animates a striped progressbar. Takes effect only for browsers supporting CSS3 animations, and if striped is true.

Default Value

false


ariaLabel

ariaLabel: string

The aria label.

Default Value

'Progressbar'


ariaValueText

ariaValueText: undefined | string

The aria value text.


children

children: SlotContent<ProgressbarContext>

Label of the progress.


className

className: string

CSS classes to be applied on the widget main container

Default Value

''


finished

finished: boolean

true if the value has reached its maximum value.


height

height: string

Height of the progressbar, can be any valid css height value.

Default Value

''


max

max: number

The maximum value.

Default Value

100


min

min: number

The minimum value.

Default Value

0


percentage

percentage: number

Percentage of completion.


started

started: boolean

true if the value is above its minimum value.


striped

striped: boolean

If true, shows a striped progressbar.

Default Value

false


structure

structure: SlotContent<ProgressbarContext>

Global template for the Progressbar.


type

type: undefined | BSContextualClass

Type of the progressbar, following bootstrap types.


value

value: number

The current value.

Default Value

0


ProgressbarWidget

type alias

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.