mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(progress-indicator): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-05-03 10:35:50 -07:00
commit a6da4f1ef0
1 changed files with 17 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

22
docs/src/pages/components/ProgressIndicator.svx
View file

@ -7,8 +7,12 @@ components: ["ProgressIndicator", "ProgressStep", "ProgressIndicatorSkeleton"]
import Preview from "../../components/Preview.svelte";
</script>
`ProgressIndicator` provides a visual representation of progress through a sequence of steps. It supports horizontal and vertical layouts, step completion states, and interactive navigation.
## Default (horizontal)
Create a horizontal progress indicator with four steps.
<ProgressIndicator currentIndex={2}>
<ProgressStep complete
label="Step 1"
@ -30,9 +34,7 @@ components: ["ProgressIndicator", "ProgressStep", "ProgressIndicatorSkeleton"]
## Prevent change on click
By default, clicking any step that is complete will update the current step index.
Set `preventChangeOnClick` to `true` to prevent this behavior.
Disable automatic step selection when clicking completed steps.
<ProgressIndicator preventChangeOnClick currentIndex={2}>
<ProgressStep complete
@ -55,12 +57,14 @@ Set `preventChangeOnClick` to `true` to prevent this behavior.
## Programmatic usage
When programmatically updating the `currentIndex`, keep in mind that only completed steps should be selectable.
Update the current step programmatically while maintaining step completion rules.
<FileSource src="/framed/ProgressIndicator/ProgrammaticProgressIndicator" />
## Invalid step
Mark a step as invalid to indicate an error state.
<ProgressIndicator>
<ProgressStep complete
label="Step 1"
@ -78,6 +82,8 @@ When programmatically updating the `currentIndex`, keep in mind that only comple
## Disabled steps
Disable specific steps to prevent user interaction.
<ProgressIndicator>
<ProgressStep complete
label="Step 1"
@ -95,6 +101,8 @@ When programmatically updating the `currentIndex`, keep in mind that only comple
## Spaced-equally
Distribute steps evenly across the available space.
<ProgressIndicator spaceEqually>
<ProgressStep
label="Really long label"
@ -112,6 +120,8 @@ When programmatically updating the `currentIndex`, keep in mind that only comple
## Vertical
Display steps in a vertical layout.
<ProgressIndicator vertical>
<ProgressStep
label="Really long label"
@ -129,10 +139,12 @@ When programmatically updating the `currentIndex`, keep in mind that only comple
## Skeleton
Use the `count` prop to specify the number of progress steps to render.
Show a loading state with the specified number of steps.
<ProgressIndicatorSkeleton />
## Skeleton (vertical)
Show a vertical loading state with the specified number of steps.
<ProgressIndicatorSkeleton vertical />