1.0.0 • Published 1 year ago
@weave-design/progress-bar v1.0.0
Progress Bar
The progress bar is one kind of visual representation of content loading.
Getting started
Install the package
yarn add @weave-design/progress-bar @weave-design/theme-context @weave-design/theme-data
Import the component
import ProgressBar from '@weave-design/progress-bar';
Basic usage
<ProgressBar />
Styling
Use the className
prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.
ProgressBar also has a stylesheet
prop that accepts a function wherein you can modify ProgressBar's styles. For instance
import ProgressBar from '@weave-design/progress-bar';
function YourComponent() {
// ...
const customStylesheet = (styles, themeData) => ({
...styles,
wrapper: {
...styles.wrapper,
backgroundColor: themeData["colorScheme.surface.level100"]
}
});
return (
<ProgressBar stylesheet={customStylesheet} />
);
}
1.0.0
1 year ago