-
This commit is contained in:
36
ui/components/progress.slint
Normal file
36
ui/components/progress.slint
Normal file
@@ -0,0 +1,36 @@
|
||||
import { Theme, SpacingSystem, Typography, Animations } from "../theme/theme.slint";
|
||||
|
||||
export component Progress {
|
||||
in property <float> value: 0; // 0-100
|
||||
in property <bool> show-label: false;
|
||||
|
||||
min-height: 8px;
|
||||
|
||||
VerticalLayout {
|
||||
spacing: SpacingSystem.spacing.s1;
|
||||
|
||||
// Progress bar
|
||||
track := Rectangle {
|
||||
height: 8px;
|
||||
background: Theme.colors.primary.transparentize(0.8);
|
||||
border-radius: SpacingSystem.radius.full;
|
||||
|
||||
indicator := Rectangle {
|
||||
width: parent.width * Math.max(0, Math.min(100, root.value)) / 100;
|
||||
height: parent.height;
|
||||
background: Theme.colors.primary;
|
||||
border-radius: SpacingSystem.radius.full;
|
||||
|
||||
animate width { duration: Animations.durations.normal; easing: Animations.ease-out; }
|
||||
}
|
||||
}
|
||||
|
||||
// Optional label
|
||||
if root.show-label: label := Text {
|
||||
text: Math.round(root.value) + "%";
|
||||
color: Theme.colors.muted-foreground;
|
||||
font-size: Typography.sizes.xs;
|
||||
horizontal-alignment: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user