mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
104 lines
No EOL
2.8 KiB
Text
104 lines
No EOL
2.8 KiB
Text
---
|
|
components: ["ProgressIndicator", "ProgressStep", "ProgressIndicatorSkeleton"]
|
|
---
|
|
|
|
<script>
|
|
import { ProgressIndicator, ProgressStep, ProgressIndicatorSkeleton } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
### Default (horizontal)
|
|
|
|
<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
|
|
|
|
By default, clicking any step that is complete will update the current step index.
|
|
|
|
Set `preventChangeOnClick` to `true` to prevent this behavior.
|
|
|
|
<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
|
|
|
|
When programmatically updating the `currentIndex`, keep in mind that only completed steps should be selectable.
|
|
|
|
<FileSource src="/framed/ProgressIndicator/ProgrammaticProgressIndicator" />
|
|
|
|
### Spaced-equally
|
|
|
|
<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
|
|
|
|
<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
|
|
|
|
Use the `count` prop to specify the number of progress steps to render.
|
|
|
|
<ProgressIndicatorSkeleton />
|
|
|
|
### Skeleton (vertical)
|
|
|
|
<ProgressIndicatorSkeleton vertical /> |