mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
83 lines
2.2 KiB
Svelte
83 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
ProgressIndicator,
|
|
ProgressStep,
|
|
ProgressIndicatorSkeleton,
|
|
} from "carbon-components-svelte";
|
|
</script>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<ProgressIndicatorSkeleton count={3} />
|