20230916-1-add tip

README.md

@@ -1550,3 +1550,49 @@ component TestDivider inherits Window {
 ```
 
 ![image-20230916001718588](https://github.com/syf20020816/SurrealismUI/blob/main/README/imgs/image-20230916001718588.png)
+
+### SURTip
+
+A tip provides supplemental, contextual information elevated near its target component
+
+#### properties
+
+* `in property <Themes> theme` : Surrealism Theme
+* `in property <string> content` : tip content
+
+#### functions
+
+* `public function open()` : open the tip
+* `public function close()` : close the tip
+
+#### callbacks
+
+* `callback clicked()` : use to open|close the tip
+
+#### example
+
+```
+import {SURTip,SURButton } from "../../index.slint";
+import {Themes} from "../../themes/index.slint";
+
+
+component TestWindow inherits Window {
+  height: 400px;
+  width: 400px;
+  
+  SURTip{
+    height:inner.height;
+    theme: Dark;
+    content:"this is a \ntip window";
+    inner:=SURButton { 
+      content: "click";
+      clicked => {
+        parent.clicked();
+      }
+    }
+  }
+ 
+}
+```
+
+![image-20230916101547495](E:\Rust\try\surrealism-ui\README\imgs\image-20230916101547495.png)

index.slint

@@ -19,6 +19,7 @@ import { SURRadio } from "./src/radio/index.slint";
 import { SURBadge,Position } from "./src/badge/index.slint";
 import { SURPersona } from "./src/persona/index.slint";
 import { SURProgress } from "./src/progress/index.slint";
+import { SURTip } from "./src/tip/index.slint";
 
 export { 
   SURText,
@@ -47,5 +48,6 @@ export {
   SURBadge,
   Position,
   SURPersona,
-  SURProgress
+  SURProgress,
+  SURTip
 }

src/tip/index.slint

@@ -0,0 +1,3 @@
+import { Tip } from "./tip.slint";
+
+export { Tip as SURTip }

src/tip/tip.slint

@@ -0,0 +1,97 @@
+/**
+* ============================================
+* @author:syf20020816@outlook.com
+* @since:20230916
+* @version:0.1.4
+* @type:interface
+* @description:
+* # SURTip
+* A tip provides supplemental, contextual information elevated near its target component
+* ## properties
+* - in property <Themes> theme : Surrealism Theme
+* - in property <string> content : tip content
+* ## functions
+* - public function open() : open the tip
+* - public function close() : close the tip
+* ## callbacks
+* - callback clicked() : use to open|close the tip
+* ============================================
+*/
+
+import { SURCard } from "../card/index.slint";
+import { ROOT-STYLES,Themes,PaddingSize } from "../../themes/index.slint";
+import { SURText } from "../text/index.slint";
+export component Tip inherits Rectangle{
+  in property <Themes> theme :Light;
+  in property <string> content : "default tips";
+  public function open() {
+     tip.visible = true; 
+  }
+  public function close() {
+    tip.visible = false;
+  }
+  callback clicked();
+  clicked => {
+    tip.visible = !tip.visible
+  }
+  states [
+    light when theme == Themes.Light: {
+      angle.fill : ROOT-STYLES.sur-theme-colors.light.normal;
+      angle.stroke : transparent;
+    }
+    primary when theme == Themes.Primary: {
+      angle.fill : ROOT-STYLES.sur-theme-colors.primary.normal;
+    }
+    success when theme == Themes.Success: {
+      angle.fill : ROOT-STYLES.sur-theme-colors.success.normal;
+    }
+    info when theme == Themes.Info: {
+      angle.fill : ROOT-STYLES.sur-theme-colors.info.normal;
+    }
+    warning when theme == Themes.Warning: {
+      angle.fill : ROOT-STYLES.sur-theme-colors.warning.normal;
+    }
+    error when theme == Themes.Error: {
+      angle.fill : ROOT-STYLES.sur-theme-colors.error.normal;
+    }
+    dark when theme == Themes.Dark: {
+      angle.fill : ROOT-STYLES.sur-theme-colors.dark.normal;
+    }
+  ]
+  @children
+  tip:=SURCard { 
+    y: -self.height - angle.height;
+    clip: false;
+    card-width: txt.width;
+    card-height: txt.height;
+    padding-size: PaddingSize.Tip;
+    visible: false;
+    theme: root.theme;
+    txt:=SURText { 
+      theme: root.theme;
+      content: root.content;
+      font-size: ROOT-STYLES.sur-font.font-size - 2px;
+      wrap: word-wrap;
+     }
+    angle:=Path {
+      y: parent.height - self.height / 3;
+      stroke-width: 1px;
+      height: ROOT-STYLES.sur-font.font-size;
+      width: ROOT-STYLES.sur-font.font-size;
+
+      MoveTo{
+        x: -8;
+        y: 0;
+      }
+      LineTo{
+        x: 8;
+        y: 16;
+      }
+      LineTo{
+        x: 24;
+        y: 0;
+      }
+      Close{}
+    }
+  }
+}

tests/src/tip.slint

@@ -0,0 +1,21 @@
+import {SURTip,SURButton } from "../../index.slint";
+import {Themes} from "../../themes/index.slint";
+
+
+component TestWindow inherits Window {
+  height: 400px;
+  width: 400px;
+
+  SURTip{
+    height:inner.height;
+    theme: Dark;
+    content:"this is a \ntip window";
+    inner:=SURButton { 
+      content: "click";
+      clicked => {
+        parent.clicked();
+      }
+    }
+  }
+
+}

themes/index.slint

@@ -50,6 +50,7 @@ export global ROOT_STYLES {
   out property <ThemePadding> sur-padding : {
     none:{top-bottom:0px,left-right:0px,same:0px},
     icon:{top-bottom:2px,left-right:2px,same:2px},
+    tip:{top-bottom:6px,left-right:10px,same:4px},
     small: {top-bottom:8px,left-right:12px,same:8px},
     normal:{top-bottom:12px,left-right:16px,same:12px},
     large:{top-bottom:16px,left-right:24px,same:16px}
@@ -136,8 +137,10 @@ export global ROOT_STYLES {
         ROOT-STYLES.sur-padding.large
       }else if(size==PaddingSize.None){
         ROOT-STYLES.sur-padding.none
+      }else if(size==PaddingSize.Tip){
+        ROOT-STYLES.sur-padding.tip
       }else{
-        ROOT-STYLES.sur-padding.icon
+        ROOT-STYLES.sur-padding.tip
       }
   }
   pure public function get-shadow-x(shadow:Shadows)->length {

themes/src/padding/padding.slint

@@ -6,6 +6,7 @@ struct PaddingItem {
 
 enum PaddingSize{
   None,
+  Tip,
   Icon,
   Small,
   Normal,
@@ -15,6 +16,7 @@ enum PaddingSize{
 
 struct ThemePadding {
   none:PaddingItem,
+  tip:PaddingItem,
   icon:PaddingItem,
   small: PaddingItem,
   normal:PaddingItem,