Mandala UI ProgressBar Component
Mandala is a React component library that utilizes a declarative CSS library for styling.
Installation
Check the MonoRepo README for installation.
Description
ProgressBar is a 100% width element that takes a percent prop and renders that much of it in another color.
Usage
if using the whole library:
import { ProgressBar } from 'mandala';if only using this component:
import ProgressBar from '@mandala-ui/progress-bar';Props
-
backgroundColor- the color of the border around the dot -
color- the width of the border around the dot -
large- the color of the dot -
percent- the width of the inner section between the dot and border -
pill- the color of the inner section of the outlined dot
| propName | propType | defaultValue | isRequired |
|---|---|---|---|
| backgroundColor | string | null | - |
| color | string | false | - |
| large | boolean | 'white' | - |
| percent | number | false | - |
| pill | boolean | false | - |
TODO:
- [ ] prop to add/remove depth (shadow)
- [ ] borderColor adds a border of relevant color
- [ ] border width
