mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
Align v10.37 (#697)
* chore(deps-dev): upgrade carbon-components to v10.27.1 * fix(toolbar-search): omit size prop * feat(progress-bar): add ProgressBar * refactor(text-input): use class directive * chore(deps-dev): rebuild yarn.lock * fix(notification): omit iconDescription from NotificationIcon #672 Fixes #672
This commit is contained in:
parent
2f5d01d0c0
commit
fb5c7553ac
19 changed files with 294 additions and 22 deletions
36
docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
Normal file
36
docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
Normal file
|
@ -0,0 +1,36 @@
|
|||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { ProgressBar } from "carbon-components-svelte";
|
||||
|
||||
let max = 328;
|
||||
let value = 0;
|
||||
let timer = undefined;
|
||||
|
||||
onMount(() => {
|
||||
timer = setTimeout(() => {
|
||||
const interval = setInterval(() => {
|
||||
const delta = Math.random() * 10;
|
||||
|
||||
if (value + delta < max) {
|
||||
value += delta;
|
||||
} else {
|
||||
value = max;
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 20);
|
||||
}, 2000);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
});
|
||||
|
||||
$: helperText =
|
||||
value > 0 ? `${value.toFixed(0)}MB of ${max}MB` : "Preparing upload...";
|
||||
$: if (value === max) helperText = "Done";
|
||||
</script>
|
||||
|
||||
<ProgressBar
|
||||
labelText="Upload status"
|
||||
value="{value}"
|
||||
max="{max}"
|
||||
helperText="{helperText}"
|
||||
/>
|
Loading…
Add table
Add a link
Reference in a new issue