mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 02:41:05 +00:00
14e714fa61* chore: patch prettier-plugin-svelte * docs(tag): add filterable small tag example * feat(ui-shell): add SideNavDivider * feat(combo-box): support warning state * docs(combo-box): add invalid state example * fix(progress-step): add title to warning icon * docs(progress-indicator): add invalid step example * docs(progress-indicator): add disabled steps example * feat(truncate): add text truncation component and action * docs(radio-tile): fix light variant example * fix(side-effects): add pre-compiled CSS to library side effects * refactor(css): use shorthand scss imports, add comments * refactor(truncate): rename "direction" prop to "clamp" * chore(deps-dev): bump carbon-components to v10.29.0 * feat(combo-box): add direction prop * feat(dropdown): add direction prop * feat(multi-select): add direction prop
138 lines
No EOL
3.7 KiB
Text
138 lines
No EOL
3.7 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" />
|
|
|
|
### Invalid step
|
|
|
|
<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
|
|
|
|
<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
|
|
|
|
<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 /> |