import { Accumulator } from '@uhg-abyss/mobile';<Accumulator />Percentage
The percentage prop determines how far the accumulator will move. The prop accepts numbers between 0 and 100.
The default is 0.
Animation Delay
The animationDelay prop is used to start the animation after a given delay (milliseconds).
The default is 0.
Color
The color prop is used to set the color for the accumulator track.
The default is set to $accumulator.color.surface.track.green.
Accumulator Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| animationDelay | number | 0 | The amount of milliseconds before animating the bar |
| color | string | $accumulator.color.surface.track.green | The color of the accumulator track |
| percentage | number | 0 | The percentage of the bar that is filled. Value between 0 and 100 |
Accumulator Classes
| Class Name | Description |
|---|---|
| abyss-accumulator-root | Accumulator root element |
| abyss-accumulator-track | Accumulator track element |
Accumulator Tokens
| Token Name | Value | |
|---|---|---|
| accumulator.color.surface.track.green | #149E8F | |
| accumulator.color.surface.track.primary | #002677 | |
| accumulator.color.surface.track.info | #196ECF | |
| accumulator.color.surface.track.white | #FFFFFF | |
| accumulator.color.border.container.green | #15A796 | |
| accumulator.color.border.container.primary | #002677 | |
| accumulator.color.border.container.info | #196ECF | |
| accumulator.color.border.container.white | #FFFFFF | |
| accumulator.border-radius.container | 500 | |
| accumulator.border-radius.track | 500 | |
| accumulator.border-width.container | 0.5 | |
| accumulator.sizing.height.track | 6 | |
| accumulator.spacing.padding.all.container | 1 |
Accumulator Classes
| V2 | V1 | Status |
|---|---|---|
| - | accumulator-end-piece | Removed |
| accumulator-root | accumulator-root | Unchanged |
| - | accumulator-slide | Removed |
| - | accumulator-slide-stopper | Removed |
| - | accumulator-start-piece | Removed |
| accumulator-track | accumulator-track | Unchanged |
Accumulator Props
| V2 | V1 | Status |
|---|---|---|
| animationDelay | animationDelay | Unchanged |
| color | - | Added |
| percentage | percentage | Unchanged |