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

Added the status for the ProgressBarUx

Browse source
This commit is contained in:
jqlio18 2022-12-13 00:33:58 -05:00
commit e2a0ce9ac7
1 changed files with 10 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

12
docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
View file

@ -3,10 +3,14 @@
let max = 328; let max = 328;
let value = 0; let value = 0;
let status = "active";
$: helperText = $: helperText =
value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start"; value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start";
$: if (value === max) helperText = "Done"; $: if (value === max) {
helperText = "Done";
status = "finished";
}
</script> </script>
<ProgressBar <ProgressBar
@ -14,6 +18,7 @@
value="{value}" value="{value}"
max="{max}" max="{max}"
helperText="{helperText}" helperText="{helperText}"
status="{status}"
/> />
<ButtonSet style="margin-top: var(--cds-spacing-08)"> <ButtonSet style="margin-top: var(--cds-spacing-08)">
@ -37,7 +42,10 @@
<Button <Button
kind="tertiary" kind="tertiary"
disabled="{value !== max}" disabled="{value !== max}"
on:click="{() => (value = 0)}" on:click="{() => {
value = 0;
status = 'active';
}}"
> >
Reset Reset
</Button> </Button>