mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
150 lines
No EOL
4 KiB
Text
150 lines
No EOL
4 KiB
Text
---
|
|
components: ["ProgressIndicator", "ProgressStep", "ProgressIndicatorSkeleton"]
|
|
---
|
|
|
|
<script>
|
|
import { ProgressIndicator, ProgressStep, ProgressIndicatorSkeleton } from "carbon-components-svelte";
|
|
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
|
|
|
|
Create a horizontal progress indicator with four steps.
|
|
|
|
<ProgressIndicator currentIndex={2}>
|
|
<ProgressStep complete
|
|
label="Step 1"
|
|
description="The progress indicator will listen for clicks on the steps"
|
|
/>
|
|
<ProgressStep complete
|
|
label="Step 2"
|
|
description="The progress indicator will listen for clicks on the steps"
|
|
/>
|
|
<ProgressStep complete
|
|
label="Step 3"
|
|
description="The progress indicator will listen for clicks on the steps"
|
|
/>
|
|
<ProgressStep
|
|
label="Step 4"
|
|
description="The progress indicator will listen for clicks on the steps"
|
|
/>
|
|
</ProgressIndicator>
|
|
|
|
## Prevent change on click
|
|
|
|
Disable automatic step selection when clicking completed steps.
|
|
|
|
<ProgressIndicator preventChangeOnClick currentIndex={2}>
|
|
<ProgressStep complete
|
|
label="Step 1"
|
|
description="The progress indicator will listen for clicks on the steps"
|
|
/>
|
|
<ProgressStep complete
|
|
label="Step 2"
|
|
description="The progress indicator will listen for clicks on the steps"
|
|
/>
|
|
<ProgressStep complete
|
|
label="Step 3"
|
|
description="The progress indicator will listen for clicks on the steps"
|
|
/>
|
|
<ProgressStep
|
|
label="Step 4"
|
|
description="The progress indicator will listen for clicks on the steps"
|
|
/>
|
|
</ProgressIndicator>
|
|
|
|
## Programmatic usage
|
|
|
|
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"
|
|
description="The progress indicator will listen for clicks on the steps"
|
|
/>
|
|
<ProgressStep invalid
|
|
label="Step 2"
|
|
description="The progress indicator will listen for clicks on the steps"
|
|
/>
|
|
<ProgressStep
|
|
label="Step 3"
|
|
description="The progress indicator will listen for clicks on the steps"
|
|
/>
|
|
</ProgressIndicator>
|
|
|
|
## Disabled steps
|
|
|
|
Disable specific steps to prevent user interaction.
|
|
|
|
<ProgressIndicator>
|
|
<ProgressStep complete
|
|
label="Step 1"
|
|
description="The progress indicator will listen for clicks on the steps"
|
|
/>
|
|
<ProgressStep disabled
|
|
label="Step 2"
|
|
description="The progress indicator will listen for clicks on the steps"
|
|
/>
|
|
<ProgressStep disabled
|
|
label="Step 3"
|
|
description="The progress indicator will listen for clicks on the steps"
|
|
/>
|
|
</ProgressIndicator>
|
|
|
|
## Spaced-equally
|
|
|
|
Distribute steps evenly across the available space.
|
|
|
|
<ProgressIndicator spaceEqually>
|
|
<ProgressStep
|
|
label="Really long label"
|
|
description="The progress indicator will listen for clicks on the steps"
|
|
/>
|
|
<ProgressStep
|
|
label="Really long label"
|
|
description="The progress indicator will listen for clicks on the steps"
|
|
/>
|
|
<ProgressStep
|
|
label="Really long label"
|
|
description="The progress indicator will listen for clicks on the steps"
|
|
/>
|
|
</ProgressIndicator>
|
|
|
|
## Vertical
|
|
|
|
Display steps in a vertical layout.
|
|
|
|
<ProgressIndicator vertical>
|
|
<ProgressStep
|
|
label="Really long label"
|
|
description="The progress indicator will listen for clicks on the steps"
|
|
/>
|
|
<ProgressStep
|
|
label="Really long label"
|
|
description="The progress indicator will listen for clicks on the steps"
|
|
/>
|
|
<ProgressStep
|
|
label="Really long label"
|
|
description="The progress indicator will listen for clicks on the steps"
|
|
/>
|
|
</ProgressIndicator>
|
|
|
|
## Skeleton
|
|
|
|
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 /> |