[+] add examples

heng30 · Aug 27, 2024 · 07328a2 · 07328a2
1 parent 340a435
commit 07328a2
Show file tree

Hide file tree

Showing 12 changed files with 285 additions and 84 deletions.
diff --git a/src/logic/tr.rs b/src/logic/tr.rs
@@ -293,6 +293,8 @@ pub fn tr(text: &str) -> String {
         ("minimal", "最小化"),
         ("close", "关闭"),
         ("Jump to", "跳转到"),
+        ("Example", "例子"),
+        ("Detail", "说明"),
     ]);
 
     if let Some(txt) = items.get(text) {

diff --git a/ui/base/circle-progress.slint b/ui/base/circle-progress.slint
@@ -3,6 +3,13 @@ import { Util } from "../util.slint";
 import { Logic } from "../logic.slint";
 import { Label } from "label.slint";
 
+// Example:
+// CircleProgress {
+//     ring-width: 20px;
+//     radius: 100px;
+//     progress: Util.progress-value(3s);
+// }
+
 export component CircleProgress inherits Rectangle {
     pure function calc-percent(ring-angle: angle) -> int {
         return Util.bound(0, ring-angle * 100 / 360deg, 100);

diff --git a/ui/base/example-component.slint b/ui/base/example-component.slint
@@ -0,0 +1,81 @@
+import { Theme, Icons } from "../theme.slint";
+import { Logic } from "../logic.slint";
+import { IconBtn } from "icon-btn.slint";
+import { Label } from "label.slint";
+
+export component ExampleComponent inherits VerticalLayout {
+    in-out property <string> detail;
+    in-out property <string> code;
+
+    in-out property <length> font-size: Theme.default-font-size;
+    in-out property <length> icon-size: Theme.icon-size;
+    in-out property <color> text-color: Theme.primary-text-color;
+
+    private property <[{title: string, content: string}]> entries: [{ title: "Detail", content: root.detail }, { title: "Example", content: root.code }];
+
+    spacing: Theme.spacing * 4;
+
+    VerticalLayout {
+        @children
+    }
+
+    for item in root.entries: VerticalLayout {
+        spacing: Theme.spacing * 2;
+        private property <bool> is-open: true;
+
+        if item.content != "": HorizontalLayout {
+            alignment: start;
+
+            IconBtn {
+                use-auto-size: true;
+                icon: is-open ? Icons.arrow-down-fill : Icons.arrow-right-fill;
+                icon-size: root.icon-size;
+                font-size: Theme.title3-font-size;
+                text: Logic.tr(item.title);
+                clicked => {
+                    is-open = !is-open;
+                }
+            }
+        }
+
+        if item.content != "": Rectangle {
+            height: parent.is-open ? lb-vbox.preferred-height : 0px;
+            background: Theme.secondary-background;
+            border-radius: Theme.border-radius;
+            clip: true;
+
+            animate height {
+                duration: Theme.default-animate-duration;
+                easing: ease-in-out;
+            }
+
+            lb-vbox := VerticalLayout {
+                padding: Theme.padding * 4;
+
+                Label {
+                    text: item.content;
+                    font-size: root.font-size;
+                    color: root.text-color;
+                    overflow: elide;
+                }
+            }
+
+            HorizontalLayout {
+                x: 0;
+                y: 0;
+                alignment: end;
+                padding: Theme.padding * 2;
+                height: ic.preferred-height + self.padding * 2;
+
+                ic := IconBtn {
+                    icon: Icons.copy;
+                    icon-size: root.icon-size;
+
+                    clicked => {
+                        Logic.copy-to-clipboard(item.content);
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/ui/base/icons/1.svg b/ui/base/icons/1.svg
diff --git a/ui/base/icons/2.svg b/ui/base/icons/2.svg
diff --git a/ui/base/progress-bar.slint b/ui/base/progress-bar.slint
@@ -3,6 +3,14 @@ import { Logic } from "../logic.slint";
 import { Util } from "../util.slint";
 import { Label } from "label.slint";
 
+// Example:
+// ProgressBar {
+//     width: 300px;
+//     height: 50px;
+//     progress: Util.progress-value(3s);
+//     is-moving-text: true;
+// }
+
 export component ProgressBar inherits Rectangle {
     pure function calc-percent(progress: float) -> int {
         return Util.bound(0, progress * 100, 100);

diff --git a/ui/base/widgets.slint b/ui/base/widgets.slint
@@ -69,6 +69,7 @@ import { Collapse, CollapseEntry } from "collapse.slint";
 import { Search } from "search.slint";
 import { PopupAction, PopupActionSetting, PopupActionEntry } from "popup-action.slint";
 import { Tree } from "tree.slint";
+import { ExampleComponent } from "example-component.slint";
 
 export {
     AppPosType,
@@ -175,5 +176,6 @@ export {
     PopupActionSetting,
     PopupActionEntry,
     Tree,
-    TreeEntry
+    TreeEntry,
+    ExampleComponent
 }
diff --git a/ui/panel/desktop/examples/progress.slint b/ui/panel/desktop/examples/progress.slint
@@ -0,0 +1,63 @@
+import { Util, Theme } from "../../def.slint";
+import { ProgressBar, CircleProgress, ExampleComponent } from "../../../base/widgets.slint";
+
+export component ProgressExample inherits Flickable {
+    viewport-height: vbox.preferred-height;
+    viewport-width: vbox.preferred-width;
+
+    vbox := VerticalLayout {
+        spacing: Theme.spacing * 20;
+        alignment: LayoutAlignment.center;
+        preferred-width: 1000px;
+
+        HorizontalLayout {
+            alignment: LayoutAlignment.center;
+
+            ExampleComponent {
+                width: vbox.preferred-width;
+
+                CircleProgress {
+                    ring-width: 20px;
+                    radius: 100px;
+                    progress: Util.progress-value(3s);
+                }
+
+                code: "CircleProgress {\n                    ring-width: 20px;\n                    radius: 100px;\n                    progress: Util.progress-value(3s);\n}";
+            }
+        }
+
+        HorizontalLayout {
+            alignment: LayoutAlignment.center;
+
+            ExampleComponent {
+                width: vbox.preferred-width;
+
+                ProgressBar {
+                    width: 300px;
+                    height: 50px;
+                    progress: Util.progress-value(3s);
+                    is-moving-text: true;
+                }
+
+                code: "ProgressBar {\n                    width: 300px;\n                    height: 50px;\n                    progress: Util.progress-value(3s);\n                    is-moving-text: true;\n}";
+            }
+        }
+
+        HorizontalLayout {
+            alignment: LayoutAlignment.center;
+
+            ExampleComponent {
+                width: vbox.preferred-width;
+
+                ProgressBar {
+                    orientation: Orientation.vertical;
+                    width: 50px;
+                    height: 200px;
+                    progress: Util.progress-value(3s);
+                }
+
+                code: "ProgressBar {\n                    orientation: Orientation.vertical;\n                    width: 50px;\n                    height: 200px;\n                    progress: Util.progress-value(3s);\n}";
+            }
+        }
+    }
+}
diff --git a/ui/panel/desktop/examples/step.slint b/ui/panel/desktop/examples/step.slint
@@ -1,28 +1,43 @@
-import { Util } from "../../def.slint";
-import { Theme } from "../../def.slint";
-import { ProcessStep } from "../../../base/widgets.slint";
+import { Theme, Util } from "../../def.slint";
+import { ProcessStep, ExampleComponent } from "../../../base/widgets.slint";
 
-export component StepExample inherits Rectangle {
+export component StepExample inherits Flickable {
+    viewport-height: vbox.preferred-height;
+    viewport-width: vbox.preferred-width;
 
-    VerticalLayout {
-        spacing: Theme.spacing * 10;
+    vbox := VerticalLayout {
+        spacing: Theme.spacing * 20;
         alignment: LayoutAlignment.center;
+        preferred-width: 1000px;
 
         VerticalLayout {
             alignment: LayoutAlignment.start;
-            ProcessStep {
-                steps: ["First Step", "Second Step", "Third Step", "Finished"];
-                current-step: Util.progress-value-int(self.steps.length, self.steps.length * 1s);
+
+            ExampleComponent {
+                width: vbox.preferred-width;
+
+                ProcessStep {
+                    steps: ["First Step", "Second Step", "Third Step", "Finished"];
+                    current-step: Util.progress-value-int(self.steps.length, self.steps.length * 1s);
+                }
+
+                code: "ProcessStep {\n                    steps: [\"First Step\", \"Second Step\", \"Third Step\", \"Finished\"];\n                    current-step: Util.progress-value-int(self.steps.length, self.steps.length * 1s);\n}";
             }
         }
 
         HorizontalLayout {
             alignment: LayoutAlignment.center;
 
-            ProcessStep {
-                orientation: Orientation.vertical;
-                steps: ["First Step", "Second Step", "Third Step", "Finished"];
-                current-step: Util.progress-value-int(self.steps.length, self.steps.length * 1s);
+            ExampleComponent {
+                width: vbox.preferred-width;
+
+                ProcessStep {
+                    orientation: Orientation.vertical;
+                    steps: ["First Step", "Second Step", "Third Step", "Finished"];
+                    current-step: Util.progress-value-int(self.steps.length, self.steps.length * 1s);
+                }
+
+                code: "ProcessStep {\n                    orientation: Orientation.vertical;\n                    steps: [\"First Step\", \"Second Step\", \"Third Step\", \"Finished\"];\n                    current-step: Util.progress-value-int(self.steps.length, self.steps.length * 1s);\n} ";
             }
         }
     }