Interface ProgressBarProps

Accepted values for sizing elements.

Essentially, all the well-known HTML properties are available, but with predefined values.

We discourage developers from using these tags. If possible, use flexbox for layout design. However, you are not prohibited from using them.

See below for an example using some of the properties:

Example:

<View
   width={200}
   height={100}
>
 <Text color="neutral-900">My awesome text</Text>
</View>

Hierarchy

Properties

bottom? display? height? id? left? maxHeight? maxWidth? minHeight? minWidth? opacity? percentage position? progressText? right? top? transform? transition? visibility? visualState? width? zIndex?

Properties

Optional bottom

bottom?: string | number

A distance from the bottom.

Example:

  <bottom={20} />

Optional display

display?: "none" | "block" | "flex" | "inline" | "inline-block" | "inline-flex"

Changes the element exhibition

Example:

<display="flex"/>

Optional height

height?: string | number

Adjust component height

Example:

   <height={100} />

Optional id

id?: string

"Fills the ID of the element (not very practical)."

Example:

 <View id="id" />

Optional left

left?: string | number

A distance from the left.

Example:

  <left={20} />

Optional maxHeight

maxHeight?: string | number

Adjust component maximum height

Example:

   <maxHeight={100} />

Optional maxWidth

maxWidth?: string | number

Adjust component maximum width

Example:

   <maxwidth={100} />

Optional minHeight

minHeight?: string | number

Adjust component minimum height

Example:

   <minHeight={100} />

Optional minWidth

minWidth?: string | number

Adjust component minimum width

Example:

   <minWidth={100} />

Optional opacity

opacity?: "none" | "solid" | "light" | "half" | "heavy" | "transparent"

Changes the element opacity

Example:

<opacity="light" />

percentage

percentage: number

The progress in percentage. Example:

<ProgressBar percentage={10}/>

The progress will occupy 10% of the space.

Optional position

position?: "fixed" | "static" | "relative" | "absolute" | "sticky"

The element positioning.

Example:

  <position="relative" />

Optional progressText

progressText?: string

The text to be displayed in the center of the progress bar. Example:

<ProgressBar progressText="loading..."/>

Optional right

right?: string | number

A distance from the right.

Example:

  <right={20} />

Optional top

top?: string | number

A distance from the top.

Example:

  <top={20} />

Optional transform

transform?: string

"Prepare a position transforming of element"

Example:

 <View transform="rotate(45deg)" />

Optional transition

transition?: string

"Prepare a transition of visual state change"

Example:

 <View transition="background-color 0.5s ease-in-out" />

Optional visibility

visibility?: "hidden" | "visible" | "collapse"

Changes the element visibility

Example:

<visibility="visible" />

Optional visualState

visualState?: "success" | "danger" | "warning"

"Determines the visual state of the component and its children."

Example:

 <View visualState="success" />

Optional width

width?: string | number

Adjust component width

Example:

   <width={100} />

Optional zIndex

zIndex?: number | "auto" | "inherit" | "initial" | "unset" | "revert" | "revert-layer"

Value of z-index

Example:

  <zIndex={1} />

Settings

Member Visibility

Theme

On This Page