mirror of
https://github.com/hanzoai/o11y-components.git
synced 2026-10-30 14:54:15 +00:00
0331b932e7
* chore(ui): add @radix-ui/react-progress primitive * chore(ui): add @radix-ui/react-progress primitive * feat(ui): exporting progress component * feat(ui): add styling for Progress component * docs(storybook): add stories and mdx documentation for Progress * Add Progress component stories for Storybook This file contains stories for the Progress component, showcasing various states and configurations including size, color, segmented steps, and info display. * fix(progress): little fixes to adapt the code pattern * docs(progress): add to readme * refactor(progress): add missing props --------- Co-authored-by: Vinícius Lourenço <[email protected]>
49 lines
1.3 KiB
Plaintext
49 lines
1.3 KiB
Plaintext
import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
|
|
import * as ProgressStories from './progress.stories';
|
|
import { Progress } from '@signozhq/ui';
|
|
|
|
<Meta of={ProgressStories} />
|
|
|
|
# Progress
|
|
|
|
The `Progress` component is used to display the current progress of an operation flow. It supports multiple sizes, custom colors, segmented steps, and status animations.
|
|
|
|
## How to use
|
|
|
|
```tsx
|
|
import { Progress } from '@signozhq/ui';
|
|
|
|
export default function MyComponent() {
|
|
// A default continuous progress bar at 50%
|
|
return <Progress percent={50} />;
|
|
}
|
|
```
|
|
|
|
This code above will render the following progress bar:
|
|
|
|
<Primary />
|
|
|
|
<Controls of={ProgressStories.Default} />
|
|
|
|
## Examples
|
|
|
|
### Segmented Progress
|
|
You can divide the progress bar into equal visual segments by providing the `steps` prop.
|
|
|
|
<Canvas of={ProgressStories.Segmented} />
|
|
|
|
### Dynamic Colors
|
|
You can override the progress indicator's background color dynamically using the `strokeColor` prop, which is useful for indicating severity levels.
|
|
|
|
<Canvas of={ProgressStories.DynamicColors} />
|
|
|
|
### Sizes
|
|
The component supports `default` and `small` sizes.
|
|
|
|
<Canvas of={ProgressStories.Sizes} />
|
|
|
|
### Status and Info
|
|
You can display the current percentage using `showInfo`, and apply a striped animation by setting `status="active"`.
|
|
|
|
<Canvas of={ProgressStories.WithInfo} />
|