mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 19:46:36 +00:00
7ddbf17cbb* ProgressBar status feature added * ProgressBar: Removed the css variables and use carbon-css instead. The way of assigning the ProgressBar value has change. It is now a style variable and scale-x is calculated in the css. This way prevent the override of carbon css. * Removed an unessacery span. * Removed an unnecessary span. * Added the status for the ProgressBarUx * Remove `style css` and update docs. * - Fixed the `capped` variable for more readability - Updated docs `label` and `helperText` - Updated docs and css * fix: finished/error states cannot be indeterminate * Run "yarn build:css" * Re-run "yarn build:docs" * test(progress-bar): assert `status` prop * chore: add aria-busy and set valuenow to 0 when not active --------- Co-authored-by: Eric Liu <ericyl.us@gmail.com> Co-authored-by: Enrico Sacchetti <enrico@theetrain.ca>
52 lines
1,022 B
Svelte
52 lines
1,022 B
Svelte
<script>
|
|
import { ProgressBar, ButtonSet, Button } from "carbon-components-svelte";
|
|
|
|
let max = 328;
|
|
let value = 0;
|
|
let status = "active";
|
|
|
|
$: helperText =
|
|
value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start";
|
|
$: if (value === max) {
|
|
helperText = "Done";
|
|
status = "finished";
|
|
}
|
|
</script>
|
|
|
|
<ProgressBar
|
|
labelText="Upload status"
|
|
value="{value}"
|
|
max="{max}"
|
|
helperText="{helperText}"
|
|
status="{status}"
|
|
/>
|
|
|
|
<ButtonSet style="margin-top: var(--cds-spacing-08)">
|
|
<Button
|
|
disabled="{value > 0}"
|
|
on:click="{() => {
|
|
const interval = setInterval(() => {
|
|
const delta = Math.random() * 10;
|
|
|
|
if (value + delta < max) {
|
|
value += delta;
|
|
} else {
|
|
value = max;
|
|
clearInterval(interval);
|
|
}
|
|
}, 30);
|
|
}}"
|
|
>
|
|
Start
|
|
</Button>
|
|
<Button
|
|
kind="tertiary"
|
|
disabled="{value !== max}"
|
|
on:click="{() => {
|
|
value = 0;
|
|
status = 'active';
|
|
}}"
|
|
>
|
|
Reset
|
|
</Button>
|
|
</ButtonSet>
|