diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7585238 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +book diff --git a/README.md b/README.md new file mode 100644 index 0000000..e91fc4b --- /dev/null +++ b/README.md @@ -0,0 +1,16 @@ + + +# SurrealismUI + +- author:syf20020816@outlook.com +- createDate:20230908 +- updateDate:20240324 +- version:0.4.1 +- email:syf20020816@outlook.com +- discord:[Surrealism-UI](https://discord.gg/KSQqrSMCnU) + + + +**SurrealismUI is a third-party component library built entirely using Slint** + +**If you have any ideas or wanna to be contributor, join Discord!** \ No newline at end of file diff --git a/book.toml b/book.toml new file mode 100644 index 0000000..4e2727c --- /dev/null +++ b/book.toml @@ -0,0 +1,6 @@ +[book] +authors = ["syf20020816"] +language = "en" +multilingual = false +src = "src" +title = "SurrealismUI Book" diff --git a/index.html b/index.html new file mode 100644 index 0000000..e5321d8 --- /dev/null +++ b/index.html @@ -0,0 +1,250 @@ + + + + + + Introduction - SurrealismUI Book + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + +
+
+

+

SurrealismUI

+
    +
  • author:syf20020816@outlook.com
  • +
  • createDate:20230908
  • +
  • updateDate:20240324
  • +
  • version:0.4.1
  • +
  • email:syf20020816@outlook.com
  • +
  • discord:Surrealism-UI
  • +
+ +

SurrealismUI is a third-party component library built entirely using Slint

+

If you have any ideas or wanna to be contributor, join Discord!

+ +
+ + +
+
+ + + +
+ + + + + + + + + + + + + + + + + + + + +
+ + diff --git a/src/SUMMARY.md b/src/SUMMARY.md new file mode 100644 index 0000000..24e3cb6 --- /dev/null +++ b/src/SUMMARY.md @@ -0,0 +1,57 @@ +# Summary + +- [Introduction](../README.md) +- [Ecology](./ecology.md) +- [Install](./install/install.md) + - [Cargo-Generate 👍](./install/cargo-generate.md) + - [Github](./install/github.md) +- [Quickstart](./quckstart.md) +- [Themes](./themes.md) +- [Components(Wdigets)](./components/components.md) + - [OverAll](./components/over-all.md) + - [Basic](./components/basic/basic.md) + - [SText](./components/basic/text.md) + - [SButton](./components/basic/button.md) + - [SDivider](./components/basic/divider.md) + - [SIcon](./components/basic/icon.md) + - [SCard](./components/basic/card.md) + - [Data](./components/data/data.md) + - [STag](./components/data/tag.md) + - [STable](./components/data/table.md) + - [SCollapse](./components/data/collapse.md) + - [SAvatar](./components/data/avatar.md) + - [SCollection](./components/data/collection.md) + - [SPersona](./components/data/persona.md) + - [SBadge](./components/data/badge.md) + - [SProgress](./components/data/progress.md) + - [STree](./components/data/tree.md) + - [SFile](./components/data/file.md) + - [STep](./components/data/step.md) + - [SKeyBoard](./components/data/keyboard.md) + - [SPagination](./components/data/pagination.md) + - [Form](./components/form/form.md) + - [SInput](./components/form/input.md) + - [SStar](./components/form/star.md) + - [SSelect](./components/form/select.md) + - [SLink](./components/form/link.md) + - [SRadio](./components/form/radio.md) + - [SSwitch](./components/form/switch.md) + - [SSwitchGroup](./components/form/switch-group.md) + - [Nav](./components/nav/nav.md) + - [SHeader](./components/nav/header.md) + - [SMenu](./components/nav/menu.md) + - [STab](./components/nav/tab.md) + - [Feedback](./components/feedback/feedback.md) + - [Result](./components/feedback/result.md) + - [SPopup](./components/feedback/popup.md) + - [SPopover](./components/feedback/popover.md) + - [STip](./components/feedback/tip.md) + - [SLoading](./components/feedback/loading.md) + - [SDialog](./components/feedback/dialog.md) + - [SDrawer](./components/feedback/drawer.md) + - [SAlert](./components/feedback/alert.md) +- [Build-In](./build-in/build-in.md) + - [Global](./build-in/global.md) + - [Struct Enum](./build-in/struct.md) + - [Function](./build-in/function.md) +- [Updates](./updates.md) \ No newline at end of file diff --git a/src/build-in/build-in.md b/src/build-in/build-in.md new file mode 100644 index 0000000..1e4cf21 --- /dev/null +++ b/src/build-in/build-in.md @@ -0,0 +1,5 @@ +# Build-In + +

+If you want to explore more powerful features, please read this chapter; otherwise, you can skip it +

\ No newline at end of file diff --git a/src/build-in/function.md b/src/build-in/function.md new file mode 100644 index 0000000..a1d75ee --- /dev/null +++ b/src/build-in/function.md @@ -0,0 +1,28 @@ +# Function + +## `UseSurrealismFn` +- pure public function count-height(h:length,padding:length)->length : count component height +- pure public function count-width(w:length,padding:length)->length : count component weight +- pure public function get-padding(size:PaddingType)->PaddingProps : get padding by PaddingType +- pure public function get-shadow(shadow:ShadowType)->ShadowProps : get shadow by ShadowType +- pure public function get-shadow-x(shadow:ShadowType)->length : get shadow x by ShadowType +- pure public function get-shadow-y(shadow:ShadowType)->length : get shadow y by ShadowType +- pure public function get-shadow-blur(shadow:ShadowType)->length : get shadow blur by ShadowType +- pure public function get-border(border:BorderType)->BorderProps : get border by BorderType +- pure public function get-space(w:length) -> length : get spacing by component width +- pure public function deeper(theme:Themes,color:brush)->brush : get deeper theme color + - pure public function light-deeper(color:brush)->brush : get deeper light theme color + - pure public function primary-deeper(color:brush)->brush : get deeper primary theme color + - pure public function success-deeper(color:brush)->brush : get deeper success theme color + - pure public function info-deeper(color:brush)->brush : get deeper info theme color + - pure public function warning-deeper(color:brush)->brush : get deeper warning theme color + - pure public function error-deeper(color:brush)->brush : get deeper error theme color + - pure public function dark-deeper(color:brush)->brush : get deeper dark theme color +- pure public function get-color(theme:Themes,level:ColorLevel)->brush : get color by theme and ColorLevel + - pure public function get-color-light(level:ColorLevel)->brush : get light color by ColorLevel + - pure public function get-color-dark(level:ColorLevel)->brush : get dark color by ColorLevel + - pure public function get-color-primary(level:ColorLevel)->brush : get primary color by ColorLevel + - pure public function get-color-info(level:ColorLevel)->brush : get info color by ColorLevel + - pure public function get-color-warning(level:ColorLevel)->brush : get warning color by ColorLevel + - pure public function get-color-success(level:ColorLevel)->brush : get success color by ColorLevel + - pure public function get-color-error(level:ColorLevel)->brush : get error color by ColorLevel \ No newline at end of file diff --git a/src/build-in/global.md b/src/build-in/global.md new file mode 100644 index 0000000..d57660b --- /dev/null +++ b/src/build-in/global.md @@ -0,0 +1,664 @@ +# Global + +## ROOT_STYLES + +Root Theme Styles + +- out property sur-font : SurrealismUI default font styles +- in-out property tag-size : tag size to `STag` +- out property font-light : font color - light #fff +- out property font-black : font color - black #000 +- in-out property sur-theme-colors : SurrealismUI theme colors +- in-out property radio-active : radio active color +- out property sur-padding : theme padding +- out property sur-border : theme border +- out property <{low:{shadow1:percent,shadow2:percent},high:{shadow1:percent,shadow2:percent}}> sur-opacity : theme opacity +- out property sur-an-duration : theme animation duration +- out property sur-an-easing : theme animation easing +- in-out property sur-size : the size of components +- out property scroll-bar-width : scroll bar width +- out property sur-shadow : theme shadow +- out property sur-spacing : theme spacing + +## GlobalProps + +default global properties + +- in-out property font +- in-out property theme +- in-out property +- in property text-alignment +- in-out property line-height +- in-out property standard-height +- in-out property standard-width +- in-out property standard-icon-size +- in-out property clip +- in-out property active-color + +## DefaultSAlertProps + +```rust +export global DefaultSAlertProps { + in-out property font-weight : 700; + in-out property font-size: GlobalProps.font.font-size; + in-out property color : GlobalProps.font.color; + in-out property font-italic : GlobalProps.font.font-italic; + in-out property font-family : GlobalProps.font.font-family; + in-out property overflow : TextOverflow.elide; + in-out property spacing : 16px; + in-out property text : "this is a alert message!"; + in-out property is-show : false; + in-out property alert-height : font-size * 1.5; + in-out property result-type: ResultType.Success; + in-out property close-icon : UseIcons.icons.Close-one; + in-out property icon-size : 16px; +} +``` +## DefaultSAvatarProps + +```rust +export global DefaultSAvatarProps { + in-out property card-height : avatar-size; + in-out property card-width : avatar-size; + in-out property padding-type: PaddingType.Normal; + in-out property shadow-type: ShadowType.Low1; + in-out property border-type : Circle-Normal; + in-out property avatar-size : ROOT-STYLES.sur-size.normal * 2; + in-out property avatar; + in-out property alt : UseIcons.icons.Avatar; + in-out property image-fit : ImageFit.cover; +} +``` +## DefaultSBadgeProps +```rust +export global DefaultSBadgeProps { + //font + in-out property font-weight : GlobalProps.font.font-weight; + in-out property font-size: GlobalProps.font.font-size - 2px; + in-out property font-color : GlobalProps.font.color; + in-out property font-italic : GlobalProps.font.font-italic; + in-out property font-family : GlobalProps.font.font-family; + //theme + in-out property theme : GlobalProps.theme; + //hight-width + in-out property card-height : font-size; + in-out property card-width : font-size; + in-out property text : ""; + in-out property icon : UseIcons.icons.Attention; + in-out property position : Position.RightTop; + in-out property icon-color : GlobalProps.font.color; +} +``` +## DefaultSButtonProps +```rust +export global DefaultSButtonProps { + //font + in-out property font-weight : GlobalProps.font.font-weight; + in-out property font-size: GlobalProps.font.font-size; + in-out property color : GlobalProps.font.color; + in-out property font-italic : GlobalProps.font.font-italic; + in-out property font-family : GlobalProps.font.font-family; + //theme + in-out property theme : GlobalProps.theme; + in property padding-type:PaddingType.Normal; + in property shadow-type: ShadowType.Low1; + in property border-type : BorderType.Normal; + in property icon; + in property show-icon : false; + in-out property text : "SButton"; + in property letter-spacing : GlobalProps.text-action.letter-spacing; + in property clip : GlobalProps.clip; + in property round : false; +} +``` +## DefaultSCardProps +```rust +export global DefaultSCardProps { + //font + in-out property font-weight : GlobalProps.font.font-weight; + in-out property font-size: GlobalProps.font.font-size; + in-out property font-color : GlobalProps.font.color; + in-out property font-italic : GlobalProps.font.font-italic; + in-out property font-family : GlobalProps.font.font-family; + //theme + in-out property theme : GlobalProps.theme; + //hight-width + in-out property card-height : GlobalProps.standard-height; + in-out property card-width : GlobalProps.standard-width; + in-out property padding-type:PaddingType.Normal; + in-out property shadow-type: ShadowType.Low1; + in-out property border-type : BorderType.Normal; + in-out property clip : GlobalProps.clip; +} +``` +## DefaultSCollapseProps +```rust +export global DefaultSCollapseProps { + //font + in-out property font-weight : GlobalProps.font.font-weight; + in-out property font-size: GlobalProps.font.font-size; + in-out property font-color : GlobalProps.font.color; + in-out property font-italic : GlobalProps.font.font-italic; + in-out property font-family : GlobalProps.font.font-family; + //theme + in-out property theme : GlobalProps.theme; + //header + in-out property header-height : GlobalProps.font.font-size; + in-out property header-title : "collapse"; + in-out property header-padding-type:PaddingType.Normal; + in-out property header-shadow-type: ShadowType.Low1; + in-out property header-border-type : BorderType.Normal; + //details + in-out property details-height : 120px; + in-out property details-padding-type:PaddingType.Normal; + in-out property details-shadow-type: ShadowType.Low1; + in-out property details-border-type : BorderType.Normal; + in-out property is-show : false; + in-out property collapse-icon : UseIcons.icons.Right-one; +} +``` +## DefaultSCollectionProps +```rust +export global DefaultSCollectionProps { + in-out property scale : 2; + in-out property is-scale : false; + in-out property easing : ease-in-out; + in-out property duration : 200ms; +} +``` +## DefaultSDialogProps +```rust +export global DefaultSDialogProps { + //theme + in-out property theme : Dark; + in-out property cancel-btn-theme : Info; + in-out property confirm-btn-theme : Primary; + in-out property cancel-btn-text : "Cancel"; + in-out property confirm-btn-text : "Confirm"; + in-out property is-show:false; + in-out property mask-opacity : 80%; + in-out property spacing : 16px; + //font + in-out property font-weight : GlobalProps.font.font-weight; + in-out property font-size: GlobalProps.font.font-size; + in-out property font-color : GlobalProps.font.color; + in-out property font-italic : GlobalProps.font.font-italic; + in-out property font-family : GlobalProps.font.font-family; + //dialog + in-out property dialog-theme : Dark; + in-out property dialog-title : "Dialog Title"; + in-out property dialog-title-size : 18px; + in-out property dialog-details : "This is a dialog info"; + in-out property dialog-height : 0.36; + in-out property dialog-title-height : 0.2; + in-out property dialog-view-height : 0.6; + in-out property btn-view-height : 0.2; + in-out property dialog-width : 0.6; + in-out property dialog-details-padding-top : 0; + in-out property dialog-details-padding-bottom : 0; + in-out property dialog-details-padding-left : 0; + in-out property dialog-details-padding-right : 0; + in-out property dialog-details-alignment : end; + in-out property padding-type:PaddingType.Normal; + in-out property shadow-type: ShadowType.Low1; + in-out property border-type : BorderType.Normal; +} +``` +## DefaultSDividerProps +```rust +export global DefaultSDividerProps { + //theme + in-out property theme : GlobalProps.theme; + in-out property height : 2px; + in-out property width : 100%; + in-out property padding-type:PaddingType.None; + in-out property shadow-type: ShadowType.Low1; + in-out property border-type : BorderType.None; +} +``` +## DefaultSDrawerProps +```rust +export global DefaultSDrawerProps { + //theme + in-out property theme : GlobalProps.theme; + in-out property is-show : false; + in-out property mask-opacity : 80%; + in-out property padding-type:PaddingType.Normal; + in-out property drawer-theme : Light; + in-out property position : Left; + in-out property proportion : 30%; +} +``` +## DefaultSFileProps +```rust +export global DefaultSFileProps { + //theme + in-out property theme :GlobalProps.theme; + in-out property <[SOption]> tabs : []; + in-out property <[length]> column-width : []; + //tab + in-out property font-family : GlobalProps.font.font-family; + in-out property font-weight : 700; + in-out property font-size: GlobalProps.font.font-size; + in-out property font-color : GlobalProps.font.color; + in-out property font-italic : GlobalProps.font.font-italic; + in-out property padding-type:PaddingType.Normal; + in-out property shadow-type: ShadowType.Low1; + in-out property border-type : BorderType.Normal; + in-out property text-alignment: TextHorizontalAlignment.left; + // item + in-out property <[FileItem]> files : []; + in-out property item-font-family : GlobalProps.font.font-family; + in-out property item-font-weight : GlobalProps.font.font-weight; + in-out property item-font-size: GlobalProps.font.font-size; + in-out property item-font-italic : GlobalProps.font.font-italic; + in-out property item-padding-type:PaddingType.Normal; +} +``` +## DefaultSHeaderProps +```rust +export global DefaultSHeaderProps { + in-out property spacing: 2px; + in-out property source :UseIcons.icons.Right; + in-out property <[SOption]> options : [ + {label:"src",value:"src"}, + {label:"header",value:"header"}, + {label:"SHeader",value:"SHeader"} + ]; + in-out property font-weight : GlobalProps.font.font-weight; + in-out property font-size: GlobalProps.font.font-size; + in-out property font-color : GlobalProps.font.color; + in-out property font-italic : GlobalProps.font.font-italic; + in-out property font-family : GlobalProps.font.font-family; + //theme + in-out property theme : GlobalProps.theme; + //hight-width + in-out property card-height : font-size; + in-out property card-width : GlobalProps.standard-width; + in-out property padding-type:PaddingType.Normal; + in-out property shadow-type: ShadowType.Low1; + in-out property border-type : BorderType.Normal; +} +``` +## DefaultSIconProps +```rust +export global DefaultSIconProps { + in-out property mouse-cursor : MouseCursor.pointer; + in-out property theme : GlobalProps.theme; + in-out property height : GlobalProps.standard-icon-size; + in-out property width : GlobalProps.standard-icon-size; + in-out property padding : 0; + //image props + in-out property source; + in-out property colorize; + in property image-fit : ImageFit.contain; + in property image-rendering : ImageRendering.smooth; + in-out property rotation : { + rotation-angle : 0, + rotation-origin-x : 0, + rotation-origin-y: 0, + }; + in-out property source-clip-x : 0; + in-out property source-clip-y : 0; + in-out property source-clip-height : 0; + in-out property source-clip-width : 0; +} +``` +## DefaultSInputProps +```rust +export global DefaultSInputProps { + //font + in-out property font-weight : GlobalProps.font.font-weight; + in-out property font-size: GlobalProps.font.font-size; + in-out property font-color : GlobalProps.font.color; + in-out property font-italic : GlobalProps.font.font-italic; + in-out property font-family : GlobalProps.font.font-family; + //theme + in-out property theme : GlobalProps.theme; + //hight-width + in-out property card-height : font-size; + in-out property card-width : 18 * font-size; + in-out property padding-type:PaddingType.Normal; + in-out property shadow-type: ShadowType.Low1; + in-out property border-type : BorderType.Normal; + + in-out property placeholder : "please input"; + in-out property disabled:false; + in-out property clearable:false; + //use eye-icon + in-out property password:false; + in-out property has-focus:false; + in-out property type : InputType.text; + in-out property icon-color; + in-out property text :""; +} +``` +## DefaultSLinkProps +```rust +export global DefaultSLinkProps { + in-out property icon : UseIcons.icons.Share; + in-out property funny : false; + in-out property underline : true; + in-out property mouse-cursor : pointer; + in-out property theme : GlobalProps.theme; + in-out property font-size : GlobalProps.font.font-size; + in-out property text:""; + in-out property font-weight : 500; + in-out property font-family : GlobalProps.font.font-family; + in-out property font-italic : GlobalProps.font.font-italic; +} +``` +## DefaultSLoadingProps +```rust +export global DefaultSLoadingProps { + in-out property font-weight : GlobalProps.font.font-weight; + in-out property font-size: GlobalProps.font.font-size; + in-out property font-color : GlobalProps.font.color; + in-out property font-italic : GlobalProps.font.font-italic; + in-out property font-family : GlobalProps.font.font-family; + in-out property opacity : 1; + in-out property is-show : false; + in-out property theme : GlobalProps.theme; + in-out property loading-icon : UseIcons.icons.Loading; + in-out property duration : 1200ms; + in-out property text : "Loading ..."; + in-out property easing : ease-in-out; + in-out property iteration-count : -1; +} +``` +## DefaultSPersonaProps +```rust +export global DefaultSPersonaProps { + in-out property btn-text : "Click"; + in-out property <[SButtonProps]> btns : []; + in-out property avatar : @image-url(""); + in-out property avatar-height:130px; + in-out property avatar-theme : GlobalProps.theme; + in-out property card-width : 200px; + in-out property spacing : 8px; + //name + in-out property name : "SYF20020816"; + in-out property name-height: GlobalProps.font.font-size * 3; + in-out property name-font-size: GlobalProps.font.font-size + 2px; + in-out property name-font-weight : 700; + in-out property name-theme: GlobalProps.theme; + in-out property name-font-family : GlobalProps.font.font-family; + in-out property name-font-italic : GlobalProps.font.font-italic; + //des + in-out property des : @tr("A Rust | Vue Developer\nEmail:\nsyf20020816@outlook.com"); + in-out property des-height: des-font-size * 1.5 * 3; + in-out property des-font-size: GlobalProps.font.font-size - 2px; + in-out property des-font-weight : GlobalProps.font.font-weight; + in-out property des-theme: GlobalProps.theme; + in-out property des-font-family : GlobalProps.font.font-family; + in-out property des-font-italic : GlobalProps.font.font-italic; +} +``` +## DefaultSPopupProps +```rust +export global DefaultSPopupProps { + in-out property is-show : false; + in-out property theme : GlobalProps.theme; + in-out property mask-opacity : 80%; +} +``` +## DefaultSProgressProps +```rust +export global DefaultSProgressProps { + //font + in-out property font-weight : GlobalProps.font.font-weight; + in-out property font-size: GlobalProps.font.font-size - 2px; + in-out property font-color : GlobalProps.font.color; + in-out property font-italic : GlobalProps.font.font-italic; + in-out property font-family : GlobalProps.font.font-family; + //theme + in-out property theme : GlobalProps.theme; + //hight-width + in-out property height : 8px + font-size * 2; + in-out property width : 100%; + in-out property text : @tr("now: {}% used 100%" , progress); + in-out property progress : 0; +} +``` +## DefaultSRadioProps +```rust +export global DefaultSRadioProps { + in-out property font-weight : GlobalProps.font.font-weight; + in-out property font-size: GlobalProps.font.font-size; + in-out property color : GlobalProps.font.color; + in-out property font-italic : GlobalProps.font.font-italic; + in-out property font-family : GlobalProps.font.font-family; + in-out property card-height : GlobalProps.font.font-size; + in-out property card-width : GlobalProps.font.font-size; + in-out property theme : GlobalProps.theme; + in-out property active-color: GlobalProps.active-color; + in-out property padding-type: PaddingType.Icon; + in-out property shadow-type: ShadowType.Low1; + in-out property border-type : BorderType.Small; + in-out property text : "SRadio"; + in-out property value : "radio"; + in-out property actived : false; +} +``` +## DefaultSResultProps +```rust +export global DefaultSResultProps { + in-out property card-height : 200px; + in-out property card-width : 140px; + in-out property icon-size : 48px; + in-out property <[SButtonProps]> btns : []; + in-out property btn-text : "CLICK!"; + in-out property result-type:ResultType.Success; + in-out property text : "This is a success message!"; + in-out property padding-type: PaddingType.Normal; + in-out property shadow-type: ShadowType.Low1; + in-out property border-type : BorderType.Normal; + in-out property icon : UseIcons.icons.Success; + in-out property theme : Success; + in-out property font-weight : GlobalProps.font.font-weight; + in-out property font-size: GlobalProps.font.font-size; + in-out property color : ROOT-STYLES.sur-theme-colors.success.font; + in-out property font-italic : GlobalProps.font.font-italic; + in-out property font-family : GlobalProps.font.font-family; +} +``` +## DefaultSSelectProps +```rust +export global DefaultSSelectProps { + //font + in-out property font-weight : GlobalProps.font.font-weight; + in-out property font-size: GlobalProps.font.font-size; + in-out property font-italic : GlobalProps.font.font-italic; + in-out property font-family : GlobalProps.font.font-family; + in-out property item-font-weight : GlobalProps.font.font-weight; + in-out property item-font-size: GlobalProps.font.font-size; + in-out property item-font-italic : GlobalProps.font.font-italic; + in-out property item-font-family : GlobalProps.font.font-family; + //theme + in-out property theme : GlobalProps.theme; + //hight-width + in-out property card-height : font-size; + in-out property card-width : 180px; + in-out property padding-type:PaddingType.Normal; + in-out property shadow-type: ShadowType.Low1; + in-out property border-type : BorderType.Normal; + in-out property <[SOption]> options; + in-out property placeholder : "please select"; + in-out property is-show : false; +} +``` +## DefaultSSwitchProps +```rust +export global DefaultSSwitchProps { + //container + in-out property card-height : 6px; + in-out property card-width : 24px; + in-out property padding-type: PaddingType.Normal; + in-out property shadow-type: ShadowType.Low1; + in-out property border-type : BorderType.Small; + in-out property active : false; + in-out property theme:GlobalProps.theme; + //switch-circle + in-out property switch-height : 6px + ROOT-STYLES.sur-padding.normal.padding-same; + in-out property switch-width : 6px + ROOT-STYLES.sur-padding.normal.padding-same; + in-out property switch-padding-type: PaddingType.None; + in-out property switch-shadow-type: ShadowType.Low1; + in-out property switch-border-type : Normal; + in-out property switch-background-color : ROOT-STYLES.sur-theme-colors.dark.deepest; + in-out property switch-border-color : ROOT-STYLES.sur-theme-colors.dark.deepest; + in-out property switch-drop-shadow-color : ROOT-STYLES.sur-theme-colors.dark.weakest; +} +``` +## DefaultSSwitchGroupProps +```rust +export global DefaultSSwitchGroupProps { + in-out property theme:GlobalProps.theme; + in-out property card-height : self.font-size / 2; + in-out property card-width : 140px; + in-out property padding-type: PaddingType.Normal; + in-out property shadow-type: ShadowType.Low1; + in-out property border-type : BorderType.None; + in-out property active ; + in-out property <[SOption]> switchs : []; + in-out property font-family : GlobalProps.font.font-family; + in-out property font-weight : GlobalProps.font.font-weight; + in-out property font-size: 14px; + in-out property font-italic : GlobalProps.font.font-italic; +} +``` +## DefaultSTableProps +```rust +export global DefaultSTableProps { + //theme + in-out property theme :GlobalProps.theme; + in-out property <[SOption]> columns : []; + in-out property <[length]> column-width : []; + in-out property <[Themes]> column-themes:[]; + in-out property viewport-height; + //tab + in-out property font-family : GlobalProps.font.font-family; + in-out property font-weight : 700; + in-out property font-size: GlobalProps.font.font-size; + in-out property font-color : GlobalProps.font.color; + in-out property font-italic : GlobalProps.font.font-italic; + in-out property padding-type:PaddingType.Normal; + in-out property shadow-type: ShadowType.Low1; + in-out property border-type : BorderType.None; + in-out property alignment: TextHorizontalAlignment.left; +} +``` +## DefaultSTableColumnProps +```rust +export global DefaultSTableColumnProps { + //theme + in-out property theme :GlobalProps.theme; + in-out property index; + in-out property <[string]> datas; + in-out property height; + in-out property width; + //tab + in-out property font-family : GlobalProps.font.font-family; + in-out property font-weight : GlobalProps.font.font-weight; + in-out property font-size: GlobalProps.font.font-size; + in-out property font-color : GlobalProps.font.color; + in-out property font-italic : GlobalProps.font.font-italic; + in-out property padding-type:PaddingType.Normal; + in-out property shadow-type: ShadowType.Low1; + in-out property border-type : BorderType.None; + in-out property alignment: TextHorizontalAlignment.left; +} +``` +## DefaultSTagProps +```rust +export global DefaultSTagProps { + in-out property text : ""; + in property font-size : ROOT-STYLES.tag-size; + in-out property font-weight : GlobalProps.font.font-weight; + in-out property font-family : GlobalProps.font.font-family; + in-out property font-italic : GlobalProps.font.font-italic; + in-out property padding-type : PaddingType.Tag; + in-out property border-type : BorderType.Normal; + in-out property shadow-type : ShadowType.Low1; + in-out property theme : GlobalProps.theme; +} +``` +## DefaultSTextProps +```rust +export global DefaultSTextProps { + //font + in-out property font-family : GlobalProps.font.font-family; + in-out property font-weight : GlobalProps.font.font-weight; + in-out property font-size: GlobalProps.font.font-size; + in-out property color : GlobalProps.font.color; + in-out property font-italic : GlobalProps.font.font-italic; + //theme + in-out property theme : GlobalProps.theme; + in-out property wrap :GlobalProps.text-action.wrap; + in-out property overflow : GlobalProps.text-action.overflow; + in-out property letter-spacing : GlobalProps.text-action.letter-spacing; + in-out property horizontal-alignment : GlobalProps.text-alignment.horizontal-alignment; + in-out property vertical-alignment : GlobalProps.text-alignment.vertical-alignment; +} +``` +## DefaultSTipProps +```rust +export global DefaultSTipProps { + //font + in-out property font-family : GlobalProps.font.font-family; + in-out property font-weight : GlobalProps.font.font-weight; + in-out property font-size: GlobalProps.font.font-size; + in-out property font-color : GlobalProps.font.color; + in-out property font-italic : GlobalProps.font.font-italic; + //theme + in-out property theme : GlobalProps.theme; + in-out property wrap :word-wrap; + in-out property overflow : GlobalProps.text-action.overflow; + in-out property letter-spacing : GlobalProps.text-action.letter-spacing; + in-out property horizontal-alignment : GlobalProps.text-alignment.horizontal-alignment; + in-out property vertical-alignment : GlobalProps.text-alignment.vertical-alignment; + in-out property position : Top; + in-out property is-show : false; + in-out property text : "default tips"; + in-out property tip-width : 0; +} +``` +## DefaultSTreeProps +```rust +export global DefaultSTreeProps { + //font + in-out property font-family : GlobalProps.font.font-family; + in-out property font-weight : 700; + in-out property font-size: GlobalProps.font.font-size; + in-out property font-italic : GlobalProps.font.font-italic; + //font + in-out property item-font-family : GlobalProps.font.font-family; + in-out property item-font-weight : GlobalProps.font.font-weight; + in-out property item-font-size: GlobalProps.font.font-size - 2px; + in-out property item-font-italic : GlobalProps.font.font-italic; + //theme + in-out property theme : GlobalProps.theme; + //hight-width + in-out property height : 100%; + in-out property width : 100%; + in-out property padding-type:PaddingType.Normal; + in-out property shadow-type: ShadowType.Low1; + in-out property border-type : BorderType.Normal; + in-out property tree-data : { + icon : UseIcons.icons.Folder, + label: "parent_folder", + extra:"", + children:[ + { + icon:UseIcons.icons.FileCode, + label:"slint.slint", + extra:"12KB", + }, + { + icon:UseIcons.icons.FileCode, + label:"surrealism.slint", + extra:"126KB", + } + ] + }; +} +``` diff --git a/src/build-in/struct.md b/src/build-in/struct.md new file mode 100644 index 0000000..85c48b6 --- /dev/null +++ b/src/build-in/struct.md @@ -0,0 +1,731 @@ +# Struct Enum + +## FontProps +- font-family (string) : font family +- font-size (length) : font size (16px👍) +- font-weight (int) : font weight [100,900] 500==Normal +- font-italic (bool) : font italic +- color (brush) : font color +## ThemeColor +- light (ColorProps) : theme light +- primary (ColorProps) : theme primary +- success (ColorProps) : theme success +- info (ColorProps) : theme info +- warning (ColorProps) : theme warning +- error (ColorProps) : theme error +- dark (ColorProps) : theme dark +### ColorProps +- name (string) : color name +- weakest (brush) : weakest color +- weaker (brush) : weaker color +- normal (brush) : normal color +- deeper (brush) : deeper color +- deepest (brush) : deepest color +- font (brush) : font color +- opacity (brush) : opacity color +## ThemePadding +- none (PaddingProps) : theme padding none +- tip (PaddingProps) : theme padding tip +- tag (PaddingProps) : theme padding tag +- icon (PaddingProps) : theme padding icon +- small (PaddingProps) : theme padding small +- normal (PaddingProps) : theme padding normal +- large (PaddingProps) : theme padding large +### PaddingProps +- padding-top (length) : padding top +- padding-bottom: (length) : padding bottom +- padding-left (length) : padding left +- padding-right (length) : padding right +- padding-same (length) : padding +## ThemeBorder +- none (BorderProps) : no border +- small (BorderProps) : small border +- normal (BorderProps) : normal border +- large (BorderProps) : large border +- x-large (BorderProps) : x-large border +- circle:`({ + none:BorderProps, + small:BorderProps, + normal:BorderProps, + large:BorderProps, + x-large:BorderProps, + })` : circle border +### BorderProps +- border-radius (length) : border radius +- border-width (length) : border width +- border-color (brush) : color of border +## SizeProps +- small (length) : size small +- normal (length) : size normal +- large (length) : size large +- largest (length) : size largest +## ThemeShadow +- low1 (ShadowProps) : lowest shadow +- low2 (ShadowProps) : lower shadow +- low3 (ShadowProps) : low shadow +- high1 (ShadowProps) : high shadow +- high2 (ShadowProps) : higher shadow +- high-empty (ShadowProps) : high blur but no x and y shadow +### ShadowProps +- x (length) : shadow x +- y (length) : shadow y +- blur (length) : shadow blur +## ThemeSpace +- none (length) : spacing when width == none(0px) +- len20 (length) : spacing when width == 20px +- len40 (length) : spacing when width == 40px +- len60 (length) : spacing when width == 60px +- len80 (length) : spacing when width == 80px +- len120 (length) : spacing when width == 120px +- len160 (length) : spacing when width == 160px +- len200 (length) : spacing when width == 200px +- len240 (length) : spacing when width == 240px +- len280 (length) : spacing when width == 280px +- len320 (length) : spacing when width == 320px +- len360 (length) : spacing when width == 360px +- len400 (length) : spacing when width == 400px +- len440 (length) : spacing when width == 440px +- len480 (length) : spacing when width == 480px +- len520 (length) : spacing when width == 520px +- len560 (length) : spacing when width == 560px + +## SAlertProps +```rust +export struct SAlertProps { + font-weight : int, + font-size: length, + color : brush, + font-italic : bool, + font-family : string, + overflow : TextOverflow, + spacing : length, + text : string, + is-show : bool, + alert-height : length, + result-type: ResultType, + close-icon : image, + icon-size : length, +} +``` +## SAvatarProps +```rust +export struct SAvatarProps { + card-height : length, + card-width : length, + padding-type: PaddingType, + shadow-type: ShadowType, + border-type : BorderType, + avatar-size : length, + avatar : image, + alt : image, + image-fit : ImageFit, +} +``` +## SBadgeProps +```rust +export struct SBadgeProps { + //font + font-weight : int, + font-size: length, + font-color : brush, + font-italic : bool, + font-family : string, + //theme + theme : Themes, + //hight-width + card-height : length, + card-width : length, + text : string, + icon : image, + position :Position, + icon-color : brush, +} +``` +## SButtonProps +```rust +export struct SButtonProps { + font-weight : int, + font-size : length, + color : brush, + font-italic : bool, + font-family : string, + theme : Themes, + padding-type : PaddingType, + shadow-type : ShadowType, + border-type : BorderType, + icon : image, + show-icon : bool, + text : string, + letter-spacing : length, + clip : bool, + round : bool +} +``` +## SCardProps +```rust +export struct SCardProps { + //font + font-weight : int, + font-size: length, + font-color : brush, + font-italic : bool, + font-family : string, + //theme + theme : Themes, + //hight-width + card-height : length, + card-width : length, + padding-type: PaddingType, + shadow-type: ShadowType, + border-type : BorderType, + clip : bool, +} +``` +## SCollapseProps +```rust +export struct SCollapseProps { + //font + font-weight : int, + font-size: length, + font-color : brush, + font-italic : bool, + font-family : string, + //theme + theme : Themes, + //header + header-height : length, + header-title : string, + header-padding-type: PaddingType, + header-shadow-type: ShadowType, + header-border-type : BorderType, + //details + details-height : length, + details-padding-type: PaddingType, + details-shadow-type: ShadowType, + details-border-type : BorderType, + is-show : bool, + collapse-icon : image, +} +``` +## SCollectionProps +```rust +export struct SCollectionProps { + scale : float, + is-scale : bool, + easing : easing, + duration : duration, +} +``` +## SDialogProps +```rust +export struct SDialogProps { + //theme + theme : Themes, + cancel-btn-theme : Themes, + confirm-btn-theme : Themes, + cancel-btn-text : string, + confirm-btn-text : string, + is-show: bool, + mask-opacity : percent, + spacing : length, + //font + font-weight : int, + font-size: length, + font-color : brush, + font-italic : bool, + font-family : string, + //dialog + dialog-theme : Themes, + dialog-title : string, + dialog-title-size : length, + dialog-details : string, + dialog-height : float, + dialog-title-height : float, + dialog-view-height : float, + btn-view-height : float, + dialog-width : float, + dialog-details-padding-top : length, + dialog-details-padding-bottom : length, + dialog-details-padding-left : length, + dialog-details-padding-right : length, + dialog-details-alignment : LayoutAlignment, + padding-type:PaddingType, + shadow-type: ShadowType, + border-type : BorderType, +} +``` +## SDividerProps +```rust +export struct SDividerProps { + //theme + theme : Themes, + height : length, + width : length, + padding-type: PaddingType, + shadow-type: ShadowType, + border-type : BorderType, +} +``` +## SDrawerProps +```rust +export struct SDrawerProps { + theme : Themes, + is-show : bool, + mask-opacity : percent, + padding-type: PaddingType, + drawer-theme : Themes, + position : Position, + proportion : percent, +} +``` +## FileItem +```rust +export struct FileItem { + icon:image, + name:string, + datetime:string, + file-type:string, + size:string, +} +``` +## SFileProps +```rust +export struct SFileProps { + //theme + theme : Themes, + tabs : [SOption], + column-width : [length], + //tab + font-family : string, + font-weight : int, + font-size: length, + font-color : brush, + font-italic : bool, + padding-type:PaddingType, + shadow-type: ShadowType, + border-type : BorderType, + text-alignment: TextHorizontalAlignment, + // item + files : [FileItem], + item-font-family : string, + item-font-weight : int, + item-font-size: length, + item-font-italic : bool, + item-padding-type:PaddingType, +} +``` +## SHeaderProps +```rust +export struct SHeaderProps { + spacing: length, + source : image, + options : [SOption], + font-weight : int, + font-size: length, + font-color : brush, + font-italic : bool, + font-family : string, + //theme + theme : Themes, + //hight-width + card-height : length, + card-width : length, + padding-type: PaddingType, + shadow-type: ShadowType, + border-type : BorderType, +} +``` +## Icons +```rust +struct Icons { + Null:image, + Loading:image, + Avatar:image, + Success:image, + Smiling_face:image, + Info:image, + Close_one:image, + Attention:image, + Help:image, + Share:image, + Up:image, + Down:image, + Down_one:image, + Right:image, + Right_one:image, + Link_left:image, + Preview_close:image, + Preview_open:image, + Close_one:image, + Setting_two:image, + Folder:image, + Folder_filled:image, + FileCode:image +} +``` +## IconProps +```rust +struct IconProps { + name:string, + source:image +} +``` +## SIconProps +```rust +struct SIconProps { + mouse-cursor : MouseCursor, + theme : Themes, + height : length, + width : length, + padding : length, + //image props + source : image, + colorize : brush, + image-fit : ImageFit, + image-rendering : ImageRendering, + rotation : RotationProps, + source-clip-x : int, + source-clip-y : int, + source-clip-height : int, + source-clip-width : int +} +``` +## SInputProps +```rust +export struct SInputProps { + //font + font-weight : int, + font-size: length, + font-color : brush, + font-italic : bool, + font-family : string, + //theme + theme : Themes, + //hight-width + card-height : length, + card-width : length, + padding-type:PaddingType, + shadow-type: ShadowType, + border-type : BorderType, + placeholder : string, + disabled:bool, + clearable:bool, + //use eye-icon + password:bool, + has-focus:bool, + type : InputType, + icon-color : brush, + text : string, +} +``` +## SLinkProps +```rust +export struct SLinkProps { + icon : image, + funny : bool, + underline : bool, + mouse-cursor : MouseCursor, + theme : Themes, + font-size : length, + text:string, + font-weight : int, + font-family : string, + font-italic : bool, +} +``` +## SLoadingProps +``` +export struct SLoadingProps { + font-weight : int, + font-size: length, + font-color : brush, + font-italic : bool, + font-family : string, + opacity : float, + is-show : bool, + theme : Themes, + loading-icon : image, + duration : duration, + text : string, + easing : easing, + iteration-count : int, +} +``` +## SPersonaProps +```rust +export struct SPersonaProps { + btn-text : string, + btns : [SButtonProps], + //avatar + avatar : image, + avatar-height: length, + avatar-theme : Themes, + card-width : length, + spacing : length, + //name + name : string, + name-height: length, + name-font-size: length, + name-font-weight : int, + name-theme: Themes, + name-font-family: string, + name-font-italic: bool, + //des + des : string, + des-height: length, + des-font-size: length, + des-font-weight : int, + des-theme: Themes, + des-font-family: string, + des-font-italic: bool, +} +``` +## SPopupProps +```rust +export struct SPopupProps { + is-show : bool, + theme : Themes, + mask-opacity : percent, +} +``` +## SProgressProps +```rust +export struct SProgressProps { + //font + font-weight : int, + font-size: length, + font-color : brush, + font-italic : bool, + font-family : string, + //theme + theme : Themes, + //hight-width + height : length, + width : length, + text : string, + progress : float, +} +``` +## SRadioProps +```rust +export struct SRadioProps { + font-weight : int, + font-size: length, + color : brush, + font-italic : bool, + font-family : string, + card-height : length, + card-width : length, + theme : Themes, + active-color: brush, + padding-type: PaddingType, + shadow-type: ShadowType, + border-type : BorderType, + text : string, + value : string, + actived : bool, +} +``` +## SResultProps +```rust +export struct SResultProps { + card-height : length, + card-width : length, + icon-size : length, + btns : [SButtonProps], + btn-text : string, + result-type: ResultType, + text : string, + padding-type: PaddingType, + shadow-type: ShadowType, + border-type : BorderType, + icon : image, + theme : Themes, +} +``` +## SSelectProps +```rust +export struct SSelectProps { + //font + font-weight : int, + font-size: length, + font-italic : bool, + font-family : string, + item-font-weight : int, + item-font-size: length, + item-font-italic : bool, + item-font-family : string, + //theme + theme : Themes, + //hight-width + card-height : length, + card-width : length, + padding-type:PaddingType, + shadow-type: ShadowType, + border-type : BorderType, + options : [SOption], + placeholder : string, + is-show : bool, +} +``` +## SOption +```rust +export struct SOption {label:string,value:string} +``` +## SSwitchProps +```rust +export struct SSwitchProps { + //container + card-height : length, + card-width : length, + padding-type: PaddingType, + shadow-type: ShadowType, + border-type : BorderType, + active : bool, + theme: Themes, + //switch-circle + switch-height : length, + switch-width : length, + switch-padding-type: PaddingType, + switch-shadow-type: ShadowType, + switch-border-type : BorderType, + switch-background-color : brush, + switch-border-color : brush, + switch-drop-shadow-color : color, +} +``` +## SSwitchGroupProps +```rust +export struct SSwitchGroupProps { + card-height : length, + card-width : length, + padding-type: PaddingType, + shadow-type: ShadowType, + border-type : BorderType, + active : string, + theme: Themes, + switchs : [SOption], + font-family : string, + font-weight : int, + font-size: length, + font-italic : bool, +} +``` +## STableProps +```rust +export struct STableProps { + //theme + columns : [SOption], + column-width : [length], + column-themes:[Themes], + viewport-height:length, + //tab + font-weight : int, + font-size: length, + font-color : brush, + font-italic : bool, + font-family : string, + //theme + theme : Themes, + padding-type: PaddingType, + shadow-type: ShadowType, + border-type : BorderType, + alignment: TextHorizontalAlignment, +} +``` +## STableColumnProps +```rust +export struct STableColumnProps { + index : int, + datas : [string], + height : length, + width : length, + //tab + font-weight : int, + font-size: length, + font-color : brush, + font-italic : bool, + font-family : string, + theme : Themes, + padding-type: PaddingType, + shadow-type: ShadowType, + border-type : BorderType, + alignment: TextHorizontalAlignment, +} +``` +## STagProps +```rust +export struct STagProps { + text : string, + font-size : length, + font-weight : int, + font-family : string, + font-italic : bool, + theme : Themes, + padding-type : PaddingType, + border-type : BorderType, + shadow-type : ShadowType +} +``` +## STextProps +```rust +struct STextProps { + font-family : string, + font-weight : int, + font-size : length, + color : brush, + font-italic : bool, + theme : Themes, + wrap :TextWrap, + overflow : TextOverflow, + letter-spacing : length, + horizontal-alignment : TextHorizontalAlignment, + vertical-alignment : TextVerticalAlignment, +} +``` +## STipProps +```rust +export struct STipProps { + //font + font-family : string, + font-weight : int, + font-size: length, + font-color : brush, + font-italic : bool, + //theme + theme : Themes, + wrap : TextWrap, + overflow : TextOverflow, + letter-spacing : length, + horizontal-alignment : TextHorizontalAlignment, + vertical-alignment : TextVerticalAlignment, + position : Position, + is-show : bool, + text : string, + tip-width : length, +} +``` +## STreeProps +```rust +export struct STreeProps { + //font + font-family : string, + font-weight : int, + font-size: length, + font-italic : bool, + //font + item-font-family : string, + item-font-weight : int, + item-font-size: length, + item-font-italic : bool, + //theme + theme : Themes, + //hight-width + height : length, + width : length, + padding-type: PaddingType, + shadow-type: ShadowType, + border-type : BorderType, + tree-data : TreeData +} +``` diff --git a/src/components/basic/basic.md b/src/components/basic/basic.md new file mode 100644 index 0000000..af02c1d --- /dev/null +++ b/src/components/basic/basic.md @@ -0,0 +1,9 @@ +# Basic + +|name|description| +|--|--| +|SText(文字组件)|Display Text, SText inherits Text and add theme property| +|SButton(按钮组件)|SButton is a button component that you can freely perform regular properties operations on| +|SDivider(分割线)| A divider groups sections of content to create visual rhythm and hierarchy.Use dividers along with spacing and headers to organize content in your layout.| +|SIcon(图标)|this is a icon container, better than Image| +|SCard(卡片)|A very simple universal card without any layout or restrictions.You can add anything you want to the card| \ No newline at end of file diff --git a/src/components/basic/button.md b/src/components/basic/button.md new file mode 100644 index 0000000..6d9eb0c --- /dev/null +++ b/src/components/basic/button.md @@ -0,0 +1,103 @@ +# SButton + +SButton is a button component that you can freely perform regular properties operations on + +![button](../../static/button.png) + +## properties inherits SCard + +- in property icon : button icon in the left; +- in property show-icon : show icon or not; +- out property has-hover : hover button or not; +- in-out property text : text display in button; +- in property letter-spacing : text letter-spacing; +- in property round : button is round or not; +- in-out property disabled : disabled to click + +## functions + +## callbacks + +- clicked : run if you click the button + +## example + +```rust +import {SButton} from "../../index.slint"; +import {Themes} from "../../use/index.slint"; + +component TestButton inherits Window { + height: 400px; + width: 400px; + SButton { + x: 20px; + y: 10px; + show-icon: true; + theme: Themes.Dark; + icon: @image-url("../../icons/acceleration.svg"); + clicked => { + self.text = "clicked" + } + } + + SButton { + x: 260px; + y: 10px; + round: true; + text: "Save"; + clicked => { + self.text = "clicked"; + } + } + + SButton { + x: 20px; + y: 100px; + text: "Success"; + theme: Themes.Success; + } + + SButton { + x: 20px; + y: 200px; + text: "Primary"; + theme: Themes.Primary; + } + + SButton { + x: 20px; + y: 300px; + text: "Info"; + theme: Themes.Info; + } + + SButton { + x: 200px; + y: 100px; + text: "Error?"; + theme: Themes.Error; + icon: @image-url("../../icons/magic-hat.svg"); + } + + SButton { + x: 200px; + y: 200px; + theme: Themes.Warning; + } + + SButton { + x: 200px; + y: 300px; + text: "disabled"; + disabled: true; + theme: Dark; + clicked => { + debug("cannot clicked") + } + pending => { + debug("pending") + } + } +} +``` + diff --git a/src/components/basic/card.md b/src/components/basic/card.md new file mode 100644 index 0000000..9ca1fbc --- /dev/null +++ b/src/components/basic/card.md @@ -0,0 +1,53 @@ +# SCard +A very simple universal card without any layout or restrictions + +you can add anything you want to the card + +![](../../static/card.png) + +## properties inherits Rectangle +- in property theme : Surrealism theme; +- in property card-height: card height (not contain padding); +- in property card-width: card width (not contain padding); +- in property padding-type : padding type; +- in property shadow-type : shadow type; +- in property border-type : border type; +- in property font-weight : font weight; +- in property font-size: font size; +- in property font-color : font color; +- in property font-italic : font italic; +- in property font-family : font family; +- in-out property card-padding : inner card padding struct; +- in-out property card-border : inner card border struct; +- in-out property card-shadow : inner card shadow struct; +## example + +```rust +import {SButton,SCard,SText} from "../../index.slint"; +import {Themes} from "../../use/index.slint"; + + +export component TestCard inherits Window { + height: 400px; + width: 600px; + VerticalLayout { + padding: 20px; + spacing: 20px; + SCard { + SText { + text: "card"; + } + } + SCard { + card-height: 36px; + card-width: 168px; + theme: Light; + } + SCard { + card-height: 124px; + width: 400px; + theme: Primary; + } + } +} +``` \ No newline at end of file diff --git a/src/components/basic/divider.md b/src/components/basic/divider.md new file mode 100644 index 0000000..7201189 --- /dev/null +++ b/src/components/basic/divider.md @@ -0,0 +1,41 @@ +# SDivider + +A divider groups sections of content to create visual rhythm and hierarchy. + +Use dividers along with spacing and headers to organize content in your layout. + +![divider](../../static/divider.png) + +## properties inherits SCard +## functions +## callbacks +## exmaple +```rust +import {SDivider} from "../../index.slint"; +import {Themes} from "../../use/index.slint"; +component TestDivider inherits Window { + height: 400px; + width: 400px; + background: #535353; + + SDivider { + y: 60px; + width: 380px; + } + SDivider { + y: 120px; + width: 380px; + theme:Themes.Error; + } + SDivider { + y: 180px; + width: 380px; + theme:Themes.Primary; + } + SDivider { + y: 240px; + width: 380px; + theme:Themes.Light; + } +} +``` \ No newline at end of file diff --git a/src/components/basic/icon.md b/src/components/basic/icon.md new file mode 100644 index 0000000..d56a840 --- /dev/null +++ b/src/components/basic/icon.md @@ -0,0 +1,39 @@ +# SIcon + +this is a icon container, better than Image + +![](../../static/icon.png) + +## properties: + +- in property mouse-cursor : mouse cursor of the icon +- in property theme : SurrealismUI themes +- in property source : icon source +- in-out property colorize : icon color +- in property image-fit : icon image fit +- in property image-rendering : image rendering +- in-out property rotation : image rotation +- in property source-clip-x : icon clip x +- in property source-clip-y : icon clip y +- in property source-clip-height : icon clip height +- in property source-clip-width : icon clip width +- out property has-hover : icon has hover + +## functions + +- pure public function get-colorize()->brush : get icon color + +## callbacks: +- callback clicked : run if you click the icon + +## example + +```rust +SIcon{ + height: 30px; + width: 30px; + colorize: self.get-colorize(); + source: @image-url("../../icons/sd-card.svg"); + theme: Themes.Primary; +} +``` \ No newline at end of file diff --git a/src/components/basic/text.md b/src/components/basic/text.md new file mode 100644 index 0000000..730825b --- /dev/null +++ b/src/components/basic/text.md @@ -0,0 +1,49 @@ +# SText + +It is the simplest and most common component in SurrealismUI + +It can display text , SText inherits Text and add theme property + +![text](../../static/text.png) + +## properties inherits Text + +- in property theme : Surrealism themes + +## callbacks: + +## functions: + +- pure public function get()->string : get content +- public function set(content:string) : set content + +## example + +```rust +import {SText} from "../../index.slint"; +import {Themes} from "../../use/index.slint"; + + +component TestText inherits Window { + height: 400px; + width: 400px; + VerticalLayout { + padding: 20px; + SText { + color: #f60; + text: "use special color"; + } + SText { + theme: Primary; + text: "use theme-primary"; + } + SText { + theme: Dark; + text: "use theme-dark"; + } + SText { + text: "中文文字"; + } + } +} +``` \ No newline at end of file diff --git a/src/components/components.md b/src/components/components.md new file mode 100644 index 0000000..f541656 --- /dev/null +++ b/src/components/components.md @@ -0,0 +1,47 @@ +# Components(Wdigets) + +- `SText` :It is the simplest and most common component in SurrealismUI +- `SButton` :`SButton` is a button component that you can freely perform regular attribute operations on +- `SIcon` :this is a icon container , better than Image +- `SInput` :This is a basic input box, often used in forms, divided into two types: text and password +- `SCard` :A very simple universal card without any layout or restrictions , you can add anything you want to the card +- `SStar` : `SStar` is a scoring component +- `SSelect` :`SSelect` is a selector that provides three types of optional input parameter values +- `STag` :A small tag used to display data +- `SHeader` :`SHeader` is a simple header component that is generated based on routing information +- `STable` :In fact, it is just the header of the table and needs to be used together with `STableColumn` or `STableColumnFlex` + + - `STableColumn` :It is table body , it covers the data of the table , It is easy for just show text in Table + - `STableColumnFlex` :It is also a kind of table body , but this component is more flexible , you can use with `STableColumnItem` together and define what will show in the table + - `STableColumnItem` :It is a component used to describe a cell in a table , It can help you define tables more easily. + +- `SCollapse` :`SCollapse` is a foldable panel. This is the outter of the Collapse, what really works is `SCollapseItem`. The outter only serves as a standard layout , this is a zero cost construction + + - `SCollapseItem` :`SCollapseItem` is a component of `SCollapse`, without which `SCollapse` will not work , You can customize the components or use the default text display method in it + +- `SResult` :`SResult` helps you easily build a quick prompt , you can build it in popup window +- `SAvatar` :`SAvatar` is a avatar component that defaults to Icons.Avatar when there are no images available +- `SLink` :`SLink` is commonly used to represent text connections or sharing +- `SDivider` :A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout. +- `SPopup` :A masked pop-up layer appears in the current window . And users will not be able to use the pop-up layer to cover the components under it. Clicking on the pop-up layer again will close it +- `SCollection` :`SCollection` is an expandable box that can be zoomed in or out by clicking (internal can also be used) +- `SRadio` :`Radio `let people select a single item +- `SBadge` :`SBadge` is a quick way to display user status or events +- `SPersona` :This component is used to display simple user introduction information +- `SProgress` :`SProgress` is commonly used to display download progress or event processing progress . And you can fully control it through the progress property +- `STip` :A tip provides supplemental, contextual information elevated near its target component +- `SLoading` : This is a loading component that you can embed anywhere you want to add a loading animation +- `SDialog` :`SDialogs` are used to confirm messages or events and display text +- `SMenu` :`SMenu` is a menu bar located on the left side that you can quickly generate through the menu-data property +- `SSwitch` :`SSwitch` is a switch used for simple judgment scenarios +- `SDrawer` :Sometimes, the Dialogue component does not meet our needs , such as your form being too long, or if you need to temporarily display some documents, please use the `SDrawer` +- `SAlert` :`SAlert` is used to display important prompt information on the page +- `SSwitchGroup` :`SSwitchGroup` switch group can contain more switch cases +- `STree` :`STree` can be used to display directory structure, forming a parent-child relationship, and can be easily displayed +- `SFile` :`SFile` can help users present file selectors GUI +- `STab` :provide tab functionality, so that users can switch between different content sections +- `SCheckbox` :`SCheckbox` let people select multi items +- `SPopover` :A customizable popover component designed to display contextual information or interactive content, attached to an element and floating above the UI. It supports various positions and can be shown or hidden programmatically. +- `SStep` :The Step component visualizes the progress of a sequence by breaking it down into individual steps. It allows for custom theming and supports indicating the current, completed, and pending steps through visual cues. +- `SKeyBoard` :A customizable keyboard component for various input types including numbers, alphabets, and computer keyboard layouts. +- `SPagination` :A component designed for navigating through pages, providing options for customization and various interactions. \ No newline at end of file diff --git a/src/components/data/avatar.md b/src/components/data/avatar.md new file mode 100644 index 0000000..1d0171c --- /dev/null +++ b/src/components/data/avatar.md @@ -0,0 +1,47 @@ +# SAvatar + +SAvatar is a avatar component that defaults to Icons.Avatar when there are no images available + +![](../../static/avatar.png) + +## examples +```rust +import {SAvatar} from "../../index.slint"; +import {ROOT-STYLES} from "../../themes/index.slint"; + +component TestWindow inherits Window { + height: 400px; + width: 400px; + background: #F5F5F5; + VerticalLayout { + padding: 20px; + spacing: 20px; + SAvatar { + } + SAvatar { + avatar-size : ROOT-STYLES.sur-size.small * 2; + padding-type : Small; + theme: Primary; + } + SAvatar { + theme: Warning; + } + SAvatar { + avatar-size : ROOT-STYLES.sur-size.small * 2; + padding-type : Small; + theme: Error; + } + SAvatar { + avatar-size : ROOT-STYLES.sur-size.large * 2; + padding-type : Large; + theme: Dark; + avatar:@image-url("../../README/imgs/logo.png"); + } + } +} +``` +## properties inherits SCard +- in property avatar-size : avatar image size; +- in property avatar : avatar image; +- in-out property alt : if the image can be displayed the default alt will instead; +- in property image-fit : image fit; \ No newline at end of file diff --git a/src/components/data/badge.md b/src/components/data/badge.md new file mode 100644 index 0000000..7f1903a --- /dev/null +++ b/src/components/data/badge.md @@ -0,0 +1,79 @@ +# SBadge + +SBadge is a quick way to display user status or events + +![](../../static/badge.png) +## example +```rust +import {SBadge,SAvatar} from "../../index.slint"; +import {Themes} from "../../use/index.slint"; + +component TestCollection inherits Window { + height: 460px; + width: 400px; + + b1:=Rectangle { + y: 30px; + height: avatar.height; + width: avatar.width; + avatar:=SAvatar { + } + SBadge { + text : "this is a badge"; + x: self.get-x(avatar.width); + y: self.get-y(avatar.height); + } + } + b2:=Rectangle { + y: 120px; + height: avatar2.height; + width: avatar2.width; + avatar2:=SAvatar { + } + SBadge { + theme: Primary; + text:"theme primary"; + x: self.get-x(avatar2.width); + y: self.get-y(avatar2.height); + position: LeftBottom; + } + } + b3:=Rectangle { + y: 210px; + height: avatar3.height; + width: avatar3.width; + avatar3:=SAvatar { + } + SBadge { + theme: Light; + text:"theme light"; + x: self.get-x(avatar3.width); + y: self.get-y(avatar3.height); + position: LeftTop; + icon-color:#ff0000; + font-color:#ff0000; + } + } + b4:=Rectangle { + y: 300px; + height: avatar4.height; + width: avatar4.width; + avatar4:=SAvatar { + } + SBadge { + x: self.get-x(avatar4.width); + y: self.get-y(avatar4.height); + position: RightTop; + } + } +} +``` +## properties inherits SCard +- in property position : badge position of the main component +- in-out property icon : badge icon; +- in property icon-color : badge icon color; +- in-out property text : text of the badge; +## functions +- pure public function get-x(p_right:length)->length 👍 +- pure public function get-y(p_bottom:length)->length 👍 +## callbacks diff --git a/src/components/data/collapse.md b/src/components/data/collapse.md new file mode 100644 index 0000000..6597fab --- /dev/null +++ b/src/components/data/collapse.md @@ -0,0 +1,137 @@ +# SCollapse + +SCollapse is a foldable panel + +This is the outter of the Collapse, what really works is SCollapseItem + +The outter only serves as a standard layout , this is a zero cost construction + +![](../../static/collapse.png) + +## example + +```rust +import {SCollapse,SCollapseItem,SButton,STable,STableColumn} from "../../index.slint"; +import { UseIcons,Themes } from "../../use/index.slint"; +import { SText } from "../../src/text/index.slint"; + +component TestWindow inherits Window { + height: 600px; + width: 400px; + SCollapse { + y: 10px; + // you can set 0 , it has no impact + // recommend use the following way + height: item1.get-height() * 3; + width: 360px; + item1:=SCollapseItem { + header-title:"Feedback"; + SText { + wrap: word-wrap; + height: item1.details-height; + width: item1.width; + text:"Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects"; + } + } + SCollapseItem { + theme: Themes.Error; + + SButton { + + } + } + SCollapseItem { + header-title:"table"; + theme: Themes.Dark; + details-height:280px; + STable{ + theme: Dark; + width: 86%; + height: 80%; + column-themes:[Themes.Dark,Themes.Dark,Themes.Dark]; + viewport-height: col1.height; + alignment: center; + columns: [ + {label:"序号",value:"$index"}, + {label:"username",value:"name"}, + {label:"age",value:"age"}, + ]; + clicked(index,item)=>{ + debug(index); + debug(item); + } + + col1:=STableColumn { + alignment: left; + datas:[ + "1", + "2", + "3", + "3", + "3", + ]; + width: parent.get-column-width(parent.width , 0); + } + STableColumn { + index:1; + width: parent.get-column-width(parent.width , 1); + datas:[ + "Matt", + "John", + "Gary", + "Harry", + "Mary", + ]; + clicked(col-index,index,value)=>{ + debug(col-index); + debug(index); + debug(value); + } + } + STableColumn { + theme: Light; + width: parent.get-column-width(parent.width , 2); + datas:[ + "16", + "12", + "19", + "21", + "11", + ]; + } + } + } + } + +} +``` + +## properties inherits Rectangle + +*** +## SCollapseItem +SCollapseItem is a component of SCollapse, without which SCollapse will not work + +You can customize the components or use the default text display method in it +### properties +- in-out property font-weight : font weight +- in-out property font-size: font size +- in-out property font-color : font color +- in-out property font-italic : font italic +- in-out property font-family : font family +- in-out property theme : SurrealismUI theme +- in-out property header-height : collapse header height +- in-out property header-title : collapse header title +- in-out property header-padding-type: collapse header padding type +- in-out property header-shadow-type: collapse header shadow type +- in-out property header-border-type : collapse header border type +- in-out property details-height : collapse detail height +- in-out property details-padding-type: collapse detail padding type +- in-out property details-shadow-type: collapse detail shadow type +- in-out property details-border-type : collapse detail border type +- in-out property is-show : the collapse detail is show or not; +- in-out property collapse-icon : collapse header expand icon +### functions +- pure public function get-height()->length : get collapse header height +### callbacks +- callback clicked() : run if you show collapse detail \ No newline at end of file diff --git a/src/components/data/collection.md b/src/components/data/collection.md new file mode 100644 index 0000000..0025541 --- /dev/null +++ b/src/components/data/collection.md @@ -0,0 +1,51 @@ +# SCollection + +SCollection is an expandable box that can be zoomed in or out by clicking (internal can also be used) + +![](../../static/collection.gif) + +## examples +```rust +import {SButton,SCollection, SText} from "../../index.slint"; +import {Themes} from "../../use/index.slint"; + +component TestCollection inherits Window { + height: 600px; + width: 600px; + + c:=SCollection{ + height: 180px; + width: 180px; + scale : 3; + clicked => { + txt.font-size = self.toggle(txt.font-size,1.5); + btn.width = self.toggle(btn.width , 1.6); + btn.theme = c.is-scale ? Themes.Dark : Themes.Error; + } + VerticalLayout { + padding: 20px; + spacing: 20px; + alignment: center; + Rectangle { + txt:=SText { + text:"Surrealism"; + } + } + Rectangle { + btn:=SButton{ + } + } + } + } +} +``` +## properties (card) +- in property scale : collection scale size; +- in-out property is-scale : collection is scale or not; +- in property easing : animation easing type; +- in property duration : animation duration; +## functions +- pure public function toggle-default(target:length)->length +- pure public function toggle(target:length,scale-size:float)->length +## callbacks +- clicked() : run if you click item in SCollection \ No newline at end of file diff --git a/src/components/data/data.md b/src/components/data/data.md new file mode 100644 index 0000000..b43efb1 --- /dev/null +++ b/src/components/data/data.md @@ -0,0 +1,17 @@ +# Data + +|name|description| +|--|--| +|STag(标签组件)|A small tag used to display data| +|STable and STableColumn(表格组件)|The table is split into table header and table content| +|SCollapse and SCollapseItem(折叠面板组件)|Ability to collapse content| +|SAvatar(头像组件)|SAvatar is a avatar component that defaults to Icons.Avatar when there are no images available| +|SCollection(收缩盒组件)|SCollection is an expandable box that can be zoomed in or out by clicking (internal can also be used)| +|SPersona(个人信息组件)|This component is used to display simple user introduction information| +|SBadge(勋章组件)|SBadge is a quick way to display user status or events| +|SProgress(进度条组件)|SProgress is commonly used to display download progress or event processing progress.And you can fully control it through the progress property| +|STree(树型组件)|STree can be used to display directory structure, forming a parent-child relationship, and can be easily displayed| +|SFile(文件组件)|SFile can help users present file selectors GUI| +|SStep(步骤组件)|The Step component visualizes the progress of a sequence by breaking it down into individual steps. It allows for custom theming and supports indicating the current, completed, and pending steps through visual cues.| +|SPagination(分页器)|A component designed for navigating through pages, providing options for customization and various interactions.| +|SKeyBoard(虚拟键盘)|A customizable keyboard component for various input types including numbers, alphabets, and computer keyboard layouts.| \ No newline at end of file diff --git a/src/components/data/file.md b/src/components/data/file.md new file mode 100644 index 0000000..d93ddf4 --- /dev/null +++ b/src/components/data/file.md @@ -0,0 +1,57 @@ +# SFile +SFile can help users present file selectors GUI + +![](../../static/file.png) +## example +```rust +import {SFile} from "../../index.slint"; +import { Themes,PaddingType,UseIcons,FileItem} from "../../use/index.slint"; + +export component TestFile inherits Window { + height: 400px; + width: 800px; + SFile{ + theme: Dark; + width: 86%; + height: 40%; + item-font-size: 14px; + tabs: [ + {label:"名称",value:"name"}, + {label:"时间",value:"dateTime"}, + {label:"文件类型",value:"file-type"}, + {label:"大小",value:"size"} + ]; + files : [ + {icon:UseIcons.icons.Folder-filled , name : "font" , datetime : "2023-11-06" , file-type : "folder" , size : "900KB"}, + {icon:UseIcons.icons.FileCode , name : "index.slint" , datetime : "2023-11-06" , file-type : "SLINT file" , size : "3KB"}, + {icon:UseIcons.icons.FileCode , name : "LICENSE" , datetime : "2023-11-06" , file-type : "file" , size : "2KB"}, + {icon:UseIcons.icons.FileCode , name : "LICENSE" , datetime : "2023-11-06" , file-type : "file" , size : "2KB"}, + {icon:UseIcons.icons.FileCode , name : "LICENSE" , datetime : "2023-11-06" , file-type : "file" , size : "2KB"} + ]; + tab-clicked(index,item)=>{ + debug(index); + debug(item); + } + item-clicked(index,cindex,item)=>{ + debug(index); + debug(cindex); + debug(item); + } + } +} +``` +## properties +- in property text-alignment : file item horizontal alignment +- in property <[SOption]> tabs : file tabs +- in-out property <[length]> column-width : file item column width +- in-out property <[FileItem]> files : file item font files +- in-out property item-font-family : file item font family +- in-out property item-font-weight : file item font weight +- in-out property item-font-size: file item font size +- in-out property item-font-italic : file item font italic +- in-out property item-padding-type: file item padding type +## functions +- pure function get-column-width(w:length,index:int)->length : get file item column width +## callbacks +- callback tab-clicked(int,SOption) : run if you click the tab +- callback item-clicked(int,int,FileItem) : run if you click a file item diff --git a/src/components/data/keyboard.md b/src/components/data/keyboard.md new file mode 100644 index 0000000..eb208c2 --- /dev/null +++ b/src/components/data/keyboard.md @@ -0,0 +1,125 @@ +# SKeyBoard +A customizable keyboard component for various input types including numbers, alphabets, and computer keyboard layouts. + +## examples + +### Number + +![](../../static/keyboard_phone_number.png) + +```rust +import {SText,SCard, SKeyBoard} from "../../index.slint"; +import { KeyBoardType } from "../../use/index.slint"; + +component TestKeyBoardNumber { + height: 460px; + width: 300px; + t:= SText { + y: 100px; + theme: kb.theme; + font-weight: 700; + text: "Click Keyboard !"; + } + SCard { + y: root.height - self.height; + card-height: 200px; + width: 100%; + theme: Info; + kb:= SKeyBoard { + theme: parent.theme; + keyboard-type: KeyBoardType.PhoneNumber; + clicked(key) =>{ + t.text = @tr("You Clicked=> \nlabel: {}\n",key.label); + // See enum KeyItems + debug(key.value); + } + } + } +} + +``` + +### Alpha + +![](../../static/keyboard_phone_alpha.png) + +```rust +import {SText,SCard, SKeyBoard} from "../../index.slint"; +import { KeyBoardType } from "../../use/index.slint"; + +component TestKeyBoardAlpha { + height: 460px; + width: 300px; + t:= SText { + y: 100px; + theme: kb.theme; + font-weight: 700; + wrap: word-wrap; + text: "Click Keyboard !"; + } + + SCard { + y: root.height - self.height; + card-height: 200px; + width: 100%; + theme: Dark; + kb:= SKeyBoard { + theme: parent.theme; + keyboard-type: KeyBoardType.PhoneAlpha; + clicked(key) =>{ + t.text = @tr("You Clicked=> \nlabel: {}\n",key.label); + // See enum KeyItems + debug(key.value); + } + } + } + +} + +``` + +### All + +![](../../static/keyboard_all.png) + +```rust +import {SText,SCard, SKeyBoard} from "../../index.slint"; +import { KeyBoardType } from "../../use/index.slint"; + +component TestKeyBoardAll { + height: 400px; + width: 720px; + t:= SText { + y: 30px; + theme: kb.theme; + color: #dc774c; + font-weight: 700; + wrap: word-wrap; + text: "Click Keyboard !"; + } + + SCard { + y: root.height - self.height; + card-height: 300px; + width: 100%; + theme: Dark; + kb:= SKeyBoard { + theme: Light; + keyboard-type: KeyBoardType.Computer; + clicked(key) =>{ + t.text = @tr("You Clicked=> \nlabel: {}\n",key.label); + // See enum KeyItems + debug(key.value); + } + } + } +} + +``` + +## Properties +- in property theme: Themes.Dark; The theme of the keyboard, defaulting to dark mode. +- in property font-size: 16px; The font size used in the keyboard. +- in-out property keyboard-type: KeyBoardType.PhoneNumber; The type of keyboard layout (e.g., phone number, phone alphabet, computer). +## Callbacks +- callback clicked(SKeyItem): Triggered when a key is clicked, returning the key item clicked. diff --git a/src/components/data/pagination.md b/src/components/data/pagination.md new file mode 100644 index 0000000..87e8fc7 --- /dev/null +++ b/src/components/data/pagination.md @@ -0,0 +1,66 @@ +# SPagination +A component designed for navigating through pages, providing options for customization and various interactions. + +![](../../static/pagination.png) + +## example +```rust +import { SPagination } from "../../index.slint"; +import {Themes,UseIcons} from "../../use/index.slint"; +export component TestPagination inherits Window { + height: 400px; + width: 560px; + background: #1d2125; + VerticalLayout { + padding-top: 32px; + padding-bottom: 32px; + alignment: space-around; + Rectangle { + a := SPagination { + page-size: 10; + total: 100; + visible-range: 6; + } + } + + Rectangle { + Text { + // current-page is index + text: @tr("current-page: {}",a.active); + font-size: 16px; + color: #fff; + } + } + + Rectangle { + p := SPagination { + theme: Themes.Primary; + active: 2; + page-size: 30; + total: 100; + pre-icon: @image-url("../../icons/to-left.svg"); + size: 16px; + next-icon: @image-url("../../icons/to-right.svg"); + } + } + } +} + +``` +## Properties +- in property theme: Themes.Dark; Specifies the theme of the pagination component, with a default of dark mode. +- in-out property active: 0; The current active page. +- in property page-size: 10; The number of items per page. +- in property total: 50; The total number of items across all pages. +- in property pre-icon: UseIcons.icons.Left; The icon used for the "previous page" button. +- in property next-icon: UseIcons.icons.Right; The icon used for the "next page" button. +- in property size: 18px; The size of the pagination component. +- in property visible-range: 5; The number of visible page buttons in the pagination component. +## Functions +- pure function get-color(hover: bool, index: int, self-color: brush) -> brush; Determines the color of page buttons based on the hover state and if it's the active page. +- pure function to-left() -> bool; Determines if the "move to left" action should be available based on the current active page and the total number of pages. +- pure function to-right() -> bool; Determines if the "move to right" action should be available based on the current active page and the total number of pages. +## Callbacks +- callback pre(int, int); Triggered when the "previous page" button is clicked. +- callback next(int, int); Triggered when the "next page" button is clicked. +- callback clicked(int, int); Triggered when a specific page number is clicked. diff --git a/src/components/data/persona.md b/src/components/data/persona.md new file mode 100644 index 0000000..ee959f2 --- /dev/null +++ b/src/components/data/persona.md @@ -0,0 +1,79 @@ +# SPersona + +This component is used to display simple user introduction information + +![](../../static/persona.png) + +## example +```rust +import {SPersona} from "../../index.slint"; +import {Themes,UseIcons} from "../../use/index.slint"; +import { ComponentSchema,DefaultSButtonProps } from "../../themes/index.slint"; + +component TestPersona inherits Window { + height: 500px; + width: 600px; + SPersona { + x: 20px; + avatar: @image-url("../../README/imgs/logo.png"); + avatar-height: 180px; + name: "SurrealismUI"; + name-font-italic: true; + name-font-weight: 900; + des: @tr("A third-party UI library using Slint, I think it will give you an extraordinary experience"); + des-font-size: 14px; + des-theme: Primary; + btns: [ + ComponentSchema.button, + { + font-weight :700, + font-size : DefaultSButtonProps.font-size, + color : DefaultSButtonProps.color, + font-italic : DefaultSButtonProps.font-italic, + font-family : DefaultSButtonProps.font-family, + theme : Themes.Primary, + padding-type : DefaultSButtonProps.padding-type, + shadow-type : DefaultSButtonProps.shadow-type, + border-type : DefaultSButtonProps.border-type, + icon : UseIcons.icons.Help, + show-icon : true, + text : "Addition", + letter-spacing : DefaultSButtonProps.letter-spacing, + clip :DefaultSButtonProps.clip, + round : true + } + ]; + clicked(e) => { + debug(e); + } + } + SPersona { + x: 300px; + btn-text: "GitHub GO!"; + } +} +``` +## properties inherits SCard +- in-out property btn-text : button text +- in property spacing : spacing of persona +- in property <[SButtonProps]> btns : buttons slot +- in property avatar : persona avatar image +- in property avatar-height: persona avatar height +- in property avatar-theme : persona avatar theme +- in-out property name : persona name +- in-out property name-height: persona name height +- in-out property name-font-size: persona name font size +- in-out property name-font-weight : persona name font weight +- in-out property name-theme: persona name theme +- in-out property name-font-family : persona name font family +- in-out property name-font-italic : persona name font italic +- in-out property des : persona description text +- in-out property des-height: persona description height +- in-out property des-font-size: persona description font size +- in-out property des-font-weight : persona description font weight +- in-out property des-theme: persona description theme +- in-out property des-font-family : persona description font family +- in-out property des-font-italic : persona description font italic +## functions +## callbacks +- callback clicked(SButtonProps): run if you click the buttons diff --git a/src/components/data/progress.md b/src/components/data/progress.md new file mode 100644 index 0000000..9de8a41 --- /dev/null +++ b/src/components/data/progress.md @@ -0,0 +1,95 @@ +# SProgress + +SProgress is commonly used to display download progress or event processing progress +And you can fully control it through the progress property + +![](../../static/progress.gif) + +## example +```rust +import {SProgress,SButton} from "../../index.slint"; +import {Themes} from "../../use/index.slint"; + +component TestProgress inherits Window { + height: 680px; + width: 400px; + + VerticalLayout { + spacing: 20px; + padding: 10px; + SProgress { + theme: Error; + height: 160px; + circle: true; + progress: 56%; + font-size: 32px; + font-weight: 700; + stroke-color: @linear-gradient(180deg, #ff1515 0%, #41ff57 100%); + text: @tr("🚀{}%",round(self.progress * 100)); + font-color: @linear-gradient(180deg, #ff1515 0%, #4193ff 100%); + } + SProgress { + height: 100px; + circle: false; + progress: 89%; + font-size: 16px; + font-weight: 700; + stroke-color: @linear-gradient(90deg, #ff1515 0%, #4741ff 100%); + } + b:= SProgress { + theme: Primary; + circle: false; + progress: 10%; + } + a:= SProgress { + height: 120px; + circle: true; + progress: 10%; + } + HorizontalLayout { + padding: 16px; + alignment: space-around; + SButton{ + text: "add"; + clicked => { + a.add(0.1); + b.add(0.1); + } + } + SButton{ + text: "full"; + clicked => { + a.full(); + b.full(); + } + } + SButton{ + text: "clear"; + clicked => { + a.clear(); + b.clear(); + } + } + } + } + +} +``` +## properties inherits Rectangle +- in property theme : progress theme +- in property text : display text +- in-out property stroke-width : stroke width +- in-out property stroke-color : color of the progress +- in-out property progress : progress value +- in-out property font-weight : display text font weight +- in-out property font-size: display text font size +- in-out property font-color : display text font color +- in-out property font-italic : display text font italic +- in-out property font-family : display text font family +- in property circle: use circle progress +## functions +- pure public function get-progress() : get timely progress +- public function full() : make progress 100% +- public function clear() : : make progress 0% +- public function add(num:float) : increase progress +## callbacks diff --git a/src/components/data/step.md b/src/components/data/step.md new file mode 100644 index 0000000..8c6276b --- /dev/null +++ b/src/components/data/step.md @@ -0,0 +1,103 @@ +# STep + +The Step component visualizes the progress of a sequence by breaking it down into individual steps. It allows for custom theming and supports indicating the current, completed, and pending steps through visual cues. + +![](../../static/step.gif) + +## example +```rust +import { SButton,SStep } from "../../index.slint"; +component TestStep { + height: 400px; + width: 400px; + VerticalLayout { + padding: 24px; + spacing: 60px; + SStep { + active: 1; + height: 100px; + font-size: 16px; + options: [ + { + label: "Step 1", + value: "1", + info: "This is Step 1😅", + }, + { + label: "Step 2", + value: "2", + info: "This is Step 2", + }, + ]; + } + s:= SStep { + height: 100px; + font-size: 16px; + active: 3; + options: [ + { + label: "Step 1", + value: "1", + info: "This is Step 1", + }, + { + label: "Step 2", + value: "2", + info: "This is Step 2", + }, + { + label: "Step 3", + value: "3", + info: "This is Step 3✅", + } + ]; + } + HorizontalLayout { + spacing: 24px; + SButton { + text: "Next"; + clicked => { + s.next(); + } + } + SButton { + text: "Clear"; + clicked => { + s.clear(); + } + } + SButton { + text: "Done"; + clicked => { + s.done(); + } + } + SButton { + text: "Active"; + clicked => { + debug(s.get-active()); + } + } + } + } +} +``` +## Properties +- in property theme : The theme setting for the step component, defaulting to Dark. +- in-out property font-size : The font size used for step labels. +- in-out property font-weight : The font weight for step labels. +- in-out property font-italic : Specifies whether the font for step labels is italic. +- in-out property font-family : The font family for step labels. +- in-out property font-color : The color of the font used for step labels. +- in-out property active : The index of the currently active step. +- in property active-color : The color indicating an active step. +- in property done-color : The color indicating a completed step. +- in property undone-color : The color indicating a pending step. +- in property <[SStepOption]> options : An array of step options defining the sequence of steps. +## Functions +- public function next() : Advances the active step by one, unless it's the last step. +- public function clear() : Resets the active step to the first step. +- public function done() : Marks all steps as completed by setting the active step beyond the last step. +- pure public function get-active() -> int : Returns the index of the currently active step. +- pure function count-align(index:int) -> LayoutAlignment : Determines the alignment of a step based on its index in the sequence. +- pure function status-color(index:int) -> brush : Returns the color that should be used for a step at the given index based on its status (active, done, or undone). diff --git a/src/components/data/table.md b/src/components/data/table.md new file mode 100644 index 0000000..47fbe9d --- /dev/null +++ b/src/components/data/table.md @@ -0,0 +1,139 @@ +# STable +In fact, it is just the header of the table and needs to be used together with `STableColumn` or `STableColumnFlex` + +![](../../static/table.png) + +## example +```rust +import {STable,STableColumn, SCard,STableColumnItem,STableColumnFlex, SButton} from "../../index.slint"; +import {Themes,PaddingType,ShadowType,BorderType,PaddingProps,BorderProps,ShadowProps,UseSurrealismFn} from "../../use/index.slint"; +import { ROOT-STYLES,DefaultSCardProps,ComponentSchema } from "../../themes/index.slint"; +import { ScrollView } from "std-widgets.slint"; +import { STag } from "../../src/tag/index.slint"; + + +export component TestTable inherits Window { + height: 500px; + width: 600px; + STable{ + theme: Dark; + width: 90%; + height: 36%; + column-themes:[Themes.Primary,Themes.Dark,Themes.Error,Themes.Dark]; + viewport-height:col1.height; + alignment: center; + columns: [ + {label:"序号",value:"$index"}, + {label:"username",value:"name"}, + {label:"age",value:"age"}, + {label:"operate",value:"opt"}, + ]; + clicked(index,item)=>{ + debug(index); + debug(item); + } + + col1:=STableColumn { + alignment: left; + datas:[ + "1", + "2", + "3", + "3", + "3", + ]; + width: parent.get-column-width(parent.width , 0); + } + STableColumn { + index:1; + width: parent.get-column-width(parent.width , 1); + datas:[ + "Matt", + "John", + "Gary", + "Harry", + "Mary", + ]; + clicked(col-index,index,value)=>{ + debug(col-index); + debug(index); + debug(value); + } + } + STableColumnFlex { + index: 2; + theme: Light; + width: parent.get-column-width(parent.width , 2); + height: self.count-column-height(5); + + for item[index] in ["16","22","31","9","18"]: STableColumnItem { + theme: parent.theme; + height: parent.height / 5; + callback row-click(string); + clicked => { + self.row-click(item); + } + row-click(row-item) => { + debug(row-item); + } + Rectangle { + STag { + text: @tr("Tag-{}",item); + theme: Primary; + } + } + } + } + STableColumnFlex { + index: 3; + theme: Dark; + width: parent.get-column-width(parent.width , 3); + height: self.count-column-height(5); + for item[index] in ["1","2","3"]: STableColumnItem { + height: parent.height / 5; + SButton { + text: @tr("operate-{}",item); + padding-type: PaddingType.Tag; + } + } + for item[index] in ["change","delete"]: STableColumnItem { + height: parent.height / 5; + SButton { + theme: Warning; + text: item; + padding-type: PaddingType.Tag; + clicked => { + debug("I am click!"); + } + } + } + } + } +} +``` +## properties inherits SCard +- in property <[Themes]> column-themes: table header columns' theme; +- in property viewport-height: table body viewport height +- in property alignment : table header horizontal alignment +- in property <[SOption]> columns : table columns +- in-out property <[length]> column-width : table column width +## functions +- pure public function get-column-width(w:length,index:int)->length : get each column width depand on the index +## callbacks +- callback clicked(int,SOption) : run if click the Table Header + +*** +## `STableColumn` 简单表格列 +It is table body , it covers the data of the table , It is easy for just show text in Table +### properties inherits SCard +- in-out property index : column index +- in property <[string]> datas : column datas +- in property alignment : row text horizontal alignment +### functions +- pure public function count-column-height()->length : count column height +### callbacks +- callback clicked(int,int,string) : run if click the row item +## `STableColumnFlex` 灵活表格列 inherits `STableColumn` +It is also a kind of table body , but this component is more flexible , you can use with `STableColumnItem` together and define what will show in the table +## `STableColumnItem` 表格单元格 +It is a component used to describe a cell in a table , It can help you define tables more easily. \ No newline at end of file diff --git a/src/components/data/tag.md b/src/components/data/tag.md new file mode 100644 index 0000000..031244d --- /dev/null +++ b/src/components/data/tag.md @@ -0,0 +1,54 @@ +# STag +A small tag used to display data + +![](../../static/tag.png) + +## properties inherits SCard + +- in property text : text in tag + +## functions + +- pure public function get() -> string : get tag text +- public function set(value:string) : set tag text + +## callbacks +- callback clicked(string) : run if you click the tag + +## example + +```rust +import {STag} from "../../index.slint"; +import {Themes} from "../../use/index.slint"; + +component TestWindow inherits Window { + height: 400px; + width: 400px; + VerticalLayout { + spacing: 20px; + padding: 20px; + STag { + text:"default"; + clicked(text) => { + debug(self.get()); + self.set(@tr("clicked -> {}",text)); + } + } + STag { + text:"error!"; + theme:Themes.Error; + } + STag { + text:"callback"; + theme:Themes.Dark; + clicked(text)=>{ + self.font-color= #ddff00; + } + } + STag { + text:"success"; + theme:Themes.Success; + } + } +} +``` \ No newline at end of file diff --git a/src/components/data/tree.md b/src/components/data/tree.md new file mode 100644 index 0000000..e922c22 --- /dev/null +++ b/src/components/data/tree.md @@ -0,0 +1,68 @@ +# STree +STree can be used to display directory structure, forming a parent-child relationship, and can be easily displayed + +![](../../static/tree.png) +## example +```rust +import {STree } from "../../index.slint"; +import {UseIcons} from "../../use/index.slint"; + +component TestTree inherits Window { + height: 400px; + width: 400px; + STree{ + y: 10px; + theme: Dark; + height: 45%; + width: 96%; + tree-data:{ + icon : UseIcons.icons.Folder_filled, + label: "SurrealismUI", + extra:"", + children:[ + { + icon:UseIcons.icons.FileCode, + label:"slint.slint", + extra:"12KB", + }, + { + icon:UseIcons.icons.FileCode, + label:"surrealism.slint", + extra:"126KB", + }, + { + icon:@image-url("../../icons/file-jpg.svg"), + label:"icon.jpg", + extra:"196KB", + }, + { + icon:@image-url("../../icons/file-gif.svg"), + label:"ui.gif", + extra:"91KB", + }, + { + icon:@image-url("../../icons/file-gif.svg"), + label:"ui2.gif", + extra:"107KB", + } + ] + }; + clicked(i,n,e)=>{ + debug(n); + } + } + STree { + y: 200px; + height: 46%; + width: 96%; + } +} +``` +## properties inherits SCard +- in property item-font-family : tree item font family +- in property item-font-weight : tree item font weight +- in property item-font-size: tree item font size +- in property item-font-italic : tree item font italic +- in-out property tree-data : tree data +## callbacks +- callback clicked(int,string,string) : run if you click an item diff --git a/src/components/feedback/alert.md b/src/components/feedback/alert.md new file mode 100644 index 0000000..76b1d27 --- /dev/null +++ b/src/components/feedback/alert.md @@ -0,0 +1,54 @@ +# SAlert +SAlert is used to display important prompt information on the page + +![](../../static/alert.png) + +## example +```rust +import {SButton, SAlert} from "../../index.slint"; +import {ResultType,Themes,UseIcons} from "../../use/index.slint"; + +component TestAlert inherits Window { + height: 400px; + width: 600px; + background: #535353; + + SButton { + text: "show"; + clicked => { + p.error("success->error!!!"); + + debug("sds1") + } + } + + + p:=SAlert { + result-type:ResultType.Success ; + text:"this is a success message!"; + } +} +``` +## properties +- in property font-weight :font weight; +- in property font-size: font size; +- in property font-color : font color; +- in property font-italic : font italic; +- in property font-family : font family; +- in property overflow : text overflow; +- in property spacing : spacing among icons and text in alert; +- in-out property text : display text in alert; +- in-out property is-show : is alert show or not; +- in property alert-height : alert height; +- in-out property result-type: the result type of the alert; +- in property close-icon : close icon; +- in property icon-size : icon size; +## functions +- public function open() : open alert +- public function close() : close alert +- public function success(text:string) : open success alert +- public function warning(text:string) : open warning alert +- public function error(text:string) : open error alert +- public function info(text:string) : open info alert +- public function help(text:string) : open help alert +- public function primary(text:string) : open primary alert diff --git a/src/components/feedback/dialog.md b/src/components/feedback/dialog.md new file mode 100644 index 0000000..e3bddb9 --- /dev/null +++ b/src/components/feedback/dialog.md @@ -0,0 +1,84 @@ +# SDialog +SDialogs are used to confirm messages or events and display text + +![](../../static/dialog.png) + +## example +```rust +import {SDialog,SButton,STable,STableColumn} from "../../index.slint"; +import {Themes} from "../../use/index.slint"; + +component TestDialog inherits Window { + height: 600px; + width: 600px; + background: #535353; + + SButton { + + text: "show"; + clicked => { + p.open(); + } + } + + + p:=SDialog { + dialog-details : ""; + confirm-btn-theme: Success; + dialog-width:80%; + dialog-height:52%; + dialog-title: "Surrealism Dialog Title"; + dialog-title-size: 20px; + dialog-details-padding-top : 16px; + // do after confirm btn clicked + viewport-height : dialog-detail.height; + // viewport-width : dialog-detail.width; + confirm=>{ + debug("confirm btn clicked~!") + } + dialog-detail:=Rectangle { + height: 200px; + + } + } +} +``` +## properties +- in property theme : Dialog mask theme +- in property cancel-btn-theme : Dialog cancel button theme +- in property confirm-btn-theme : Dialog confirm button theme +- in property cancel-btn-text : Dialog cancel button text +- in property confirm-btn-text : Dialog confirm button text +- in-out property is-show: Dialog is show or not +- in property mask-opacity : Dialog mask opacity +- in property spacing : Dialog spacing +- in property font-weight : Dialog text font weight +- in property font-size: Dialog text font size; +- in property font-color : Dialog text font color; +- in property font-italic : Dialog text font italic; +- in property font-family : Dialog text font family; +- in property dialog-theme : Dialog theme +- in property dialog-title : Dialog title +- in property dialog-title-size : Dialog title size +- in property dialog-details : Dialog detail text +- in property dialog-height : Dialog height +- in property dialog-title-height : Dialog title height +- in property dialog-view-height : Dialog view height +- in property btn-view-height : Dialog button view height +- in property dialog-width : Dialog width +- in property dialog-details-padding-top: Dialog details padding top +- in property dialog-details-padding-bottom: Dialog details padding bottom +- in property dialog-details-padding-left: Dialog details padding left +- in property dialog-details-padding-right: Dialog details padding right +- in property padding-type: Dialog padding type +- in property shadow-type: Dialog shadow type +- in property border-type : Dialog border type +- in property viewport-height : Dialog viewport height +- in property viewport-width : Dialog viewport width +- in property dialog-details-alignment: Dialog details alignment +## functions +- public function open() : open dialog +- public function close() : close dialog +## callbacks +- callback confirm() : run after confirm button click +- callback cancel() : run after cancel button click diff --git a/src/components/feedback/drawer.md b/src/components/feedback/drawer.md new file mode 100644 index 0000000..813db49 --- /dev/null +++ b/src/components/feedback/drawer.md @@ -0,0 +1,46 @@ +# SDrawer +Sometimes, the Dialogue component does not meet our needs +such as your form being too long, or if you need to temporarily display some documents, please use the SDrawer + +![](../../static/drawer.png) +## example +```rust +import {SDrawer,SButton, SInput} from "../../index.slint"; +import {Themes} from "../../use/index.slint"; + +component TestDrawer inherits Window { + height: 800px; + width: 800px; + background: #535353; + + SButton { + text: "show"; + clicked => { + p.open(); + + debug("sds1") + } + } + + + p:=SDrawer { + proportion:40%; + drawer-theme: Dark; + SButton { + theme: Dark; + } + SInput { + y: 30px; + } + } +} +``` +## properties +- in property drawer-theme : drawer theme +- in property drawer-background-color : drawer background color +- in property padding-type: drawer padding type +- in property position : the position of the drawer +- in property proportion : the percentage of the drawer +## functions +- function default-height-width()->{height:percent,width:percent} : count drawer height and width ⛔ +- function get-position()->{x:length,y:length} : count position ⛔ diff --git a/src/components/feedback/feedback.md b/src/components/feedback/feedback.md new file mode 100644 index 0000000..676af58 --- /dev/null +++ b/src/components/feedback/feedback.md @@ -0,0 +1,12 @@ +# Feedback + +|name|description| +|--|--| +|SResult(结果组件)|SResult helps you easily build a quick prompt , you can build it in popup window| +|SPopup(弹出框组件)|A masked popup layer appears in the current window.And users will not be able to use the popup layer to cover the components under it.Clicking on the popup layer again will close it| +|STip(提示组件)|A tip provides supplemental, contextual information elevated near its target component| +|SLoading(加载组件)|This is a loading component that you can embed anywhere you want to add a loading animation| +|SDialog(对话框组件)|SDialogs are used to confirm messages or events and display text| +|SDrawer(抽屉组件)|Sometimes, the Dialogue component does not meet our needs.Such as your form being too long, or if you need to temporarily display some documents, please use the SDrawer| +|SAlert(通知组件)|SAlert is used to display important prompt information on the page| +|SPopover(气泡卡片组件)|A customizable popover component designed to display contextual information or interactive content, attached to an element and floating above the UI. It supports various positions and can be shown or hidden programmatically.| \ No newline at end of file diff --git a/src/components/feedback/loading.md b/src/components/feedback/loading.md new file mode 100644 index 0000000..55e505b --- /dev/null +++ b/src/components/feedback/loading.md @@ -0,0 +1,56 @@ +# SLoading +This is a loading component that you can embed anywhere you want to add a loading animation + +![](../../static/loading.png) + +## example +```rust +import {SLoading,SButton,SCard} from "../../index.slint"; + +export component TestLoading inherits Window { + height: 600px; + width: 400px; + SButton { + y: 100px; + text: "show"; + clicked => { + p.open(); + } + } + SButton { + y: 160px; + text: "close"; + clicked => { + p.close(); + } + } + SCard{ + y: 260px; + clip: true; + card-height: 260px; + card-width: 180px; + p:=SLoading { + text : "SurrealismUI"; + font-weight:700; + } + } +} +``` + +## properties inherits Window +- in property font-weight : loading text font weight +- in property font-size: loading text font size +- in property font-color : loading text font color +- in property font-italic : loading text font italic +- in property font-family : loading text font family +- in property loading-icon : loading icon +- in-out property duration : loading animation duration +- in property text : loading text +- in-out property is-show : loading is show or not +- in property theme : SurrealismUI theme +- in property easing : loading animation easing type +- in-out property iteration-count : loading animation iteration count +## functions +## callbacks +- callback open() : open the loading +- callback close() : close the loading diff --git a/src/components/feedback/popover.md b/src/components/feedback/popover.md new file mode 100644 index 0000000..fa5c750 --- /dev/null +++ b/src/components/feedback/popover.md @@ -0,0 +1,89 @@ +# SPopover +A customizable popover component designed to display contextual information or interactive content, attached to an element and floating above the UI. It supports various positions and can be shown or hidden programmatically. + +![](../../static/popover.png) + +## example +```rust +import {SPopover,SButton,SText } from "../../index.slint"; +import {Themes} from "../../use/index.slint"; +component TestPopover { + height: 400px; + width: 400px; + hover-btn:=SButton { + y: 100px; + text: "hover"; + } + SPopover{ + y: hover-btn.y; + x: hover-btn.x; + owner-width:hover-btn.width; + owner-height:hover-btn.height; + height:inner.height; + width: inner.width; + theme: Themes.Dark; + position: Right; + is-show:hover-btn.has-hover; + inner:= Rectangle{ + height: 46px; + width: 180px; + VerticalLayout { + SText { + text: "this is content for hover button!"; + } + } + } + } + click-btn:=SButton { + y: 300px; + text: "click"; + clicked => { + click-pop.clicked(); + } + } + click-pop:= SPopover{ + y: click-btn.y; + x: click-btn.x; + owner-width: click-btn.width; + owner-height: click-btn.height; + height:inner2.height; + width: inner2.width; + theme: Themes.Light; + position: Top; + inner2:= Rectangle{ + height: 120px; + width: 300px; + VerticalLayout { + alignment: space-around; + SText { + font-weight: 700; + theme: Light; + text: "this is a content for click button"; + } + Rectangle { + SButton { + text:"click here to close!"; + clicked => { + click-pop.close(); + } + } + } + } + } + } +} +``` +## Properties +- in-out property theme : The theme of the popover, allowing customization of its appearance according to the provided theme settings. +- in-out property position : The position of the popover relative to its owner element, determining where the popover is displayed around the owner. +- in-out property is-show : A boolean value indicating whether the popover is currently shown or hidden. +- in-out property owner-height : The height of the owner element to which the popover is attached, used in positioning calculations. +- in-out property owner-width : The width of the owner element to which the popover is attached, used in positioning calculations. +## Functions +- public function open() : Shows the popover by setting the is-show property to true. +- public function close() : Hides the popover by setting the is-show property to false. +- pure public function count-x(w:length) -> length : Calculates the X-coordinate for the popover's position based on the specified width and the position relative to the owner. +- pure public function count-y(h:length) -> length : Calculates the Y-coordinate for the popover's position based on the specified height and the position relative to the owner. +## Callbacks +- callback clicked: Triggered when the popover is clicked. Toggles the visibility of the popover by changing the is-show property. + diff --git a/src/components/feedback/popup.md b/src/components/feedback/popup.md new file mode 100644 index 0000000..0e07c5c --- /dev/null +++ b/src/components/feedback/popup.md @@ -0,0 +1,40 @@ +# SPopup +A masked popup layer appears in the current window +And users will not be able to use the popup layer to cover the components under it. +Clicking on the popup layer again will close it + +![](../../static/popup.png) + +## example +``` +import {SPopup,SButton} from "../../index.slint"; +import {Themes} from "../../use/index.slint"; + +component TestPopup inherits Window { + height: 500px; + width: 500px; + background: #535353; + + SButton { + text: "show"; + clicked => { + p.open(); + debug("sds1") + } + } + p:=SPopup { + SButton { + text: "you can add anything in Popup"; + y: 160px; + } + } +} +``` +## properties inherits Window +- in-out property is-show : popup is show or not +- in property theme : SurrealismUI theme +- in property mask-opacity : popup mask opacity +## functions +- public function open() : open the popup +- public function close() : close the popup +## callbacks diff --git a/src/components/feedback/result.md b/src/components/feedback/result.md new file mode 100644 index 0000000..687cc83 --- /dev/null +++ b/src/components/feedback/result.md @@ -0,0 +1,97 @@ +# Result + +SResult helps you easily build a quick prompt , you can build it in popup window + +![](../../static/result.png) +## example +```rust +import {SResult} from "../../index.slint"; +import {Themes,ResultType} from "../../use/index.slint"; +import {DefaultSButtonProps} from "../../themes/index.slint"; +export component TestResult inherits Window { + height: 500px; + width: 800px; + SResult { + x: 10px; + y: 10px; + } + SResult { + x: 220px; + y: 10px; + result-type:ResultType.Primary; + clicked(e) => { + //没有设置btns获取的是空SButtonProps + debug(e); + } + } + SResult { + x: 220px; + y: 260px; + card-width: 300px; + text : "use button slot"; + font-size: 18px; + font-weight: 700; + result-type:ResultType.Info; + btns:[ + { + font-weight : DefaultSButtonProps.font-weight, + font-size : DefaultSButtonProps.font-size, + font-italic : DefaultSButtonProps.font-italic, + font-family : DefaultSButtonProps.font-family, + theme : Themes.Success, + padding-type : DefaultSButtonProps.padding-type, + shadow-type : DefaultSButtonProps.shadow-type, + border-type : DefaultSButtonProps.border-type, + icon : DefaultSButtonProps.icon, + show-icon : DefaultSButtonProps.show-icon, + text : "confirm!", + letter-spacing : DefaultSButtonProps.letter-spacing, + clip : DefaultSButtonProps.clip, + round : DefaultSButtonProps.round + }, + { + font-weight : DefaultSButtonProps.font-weight, + font-size : DefaultSButtonProps.font-size, + font-italic : DefaultSButtonProps.font-italic, + font-family : DefaultSButtonProps.font-family, + theme : Themes.Light, + padding-type : DefaultSButtonProps.padding-type, + shadow-type : DefaultSButtonProps.shadow-type, + border-type : DefaultSButtonProps.border-type, + icon : DefaultSButtonProps.icon, + show-icon : DefaultSButtonProps.show-icon, + text : "cancel!", + letter-spacing : DefaultSButtonProps.letter-spacing, + clip : DefaultSButtonProps.clip, + round : true + } + ]; + } + SResult { + x: 10px; + y: 260px; + result-type:ResultType.Warning; + } + + SResult { + x: 440px; + y: 10px; + result-type:ResultType.Error; + } + SResult { + x: 580px; + y: 260px; + result-type:ResultType.Help; + } +} +``` +## properties +- in-out property btn-text : result button text +- in property icon-size : result icon size +- in property <[SButtonProps]> btns : result buttons +- in property result-type: result type +- in-out property text : text of the result +- in-out property icon : result icon +## functions +## callbacks +- callback clicked(SButtonProps) : run if you click the button diff --git a/src/components/feedback/tip.md b/src/components/feedback/tip.md new file mode 100644 index 0000000..ec8282d --- /dev/null +++ b/src/components/feedback/tip.md @@ -0,0 +1,84 @@ +# STip +A tip provides supplemental, contextual information elevated near its target component + +![](../../static/tip.png) +## example +```rust +import {STip,SButton } from "../../index.slint"; +import {Themes} from "../../use/index.slint"; + + +component TestWindow inherits Window { + height: 400px; + width: 400px; + STip{ + y: 80px; + height:inner0.height; + width: inner0.width; + theme: Dark; + position:Top; + text:"this is a \n........tip window"; + is-show:inner0.has-hover; + inner0:=SButton { + text: "hover"; + } + } + STip{ + + height:inner.height; + width: inner.width; + theme: Primary; + position:LeftBottom; + overflow: TextOverflow.elide; + tip-width : 120px; + horizontal-alignment: center; + text:"this is a ....\n....tip\n window"; + inner:=SButton { + text: "click"; + clicked => { + parent.clicked(); + } + } + } + STip{ + y: 300px; + height:inner2.height; + width: inner2.width; + theme: Dark; + position:Right; + // wrap: TextWrap.no-wrap; + text:"测试文本文字"; + font-size: 16px; + inner2:=SButton { + text: "click"; + clicked => { + parent.clicked(); + } + } + } + +} +``` +## properties +- in-out property font-family : tip text font family +- in-out property font-weight : tip text font weight +- in-out property font-size: tip text font size +- in-out property font-color : tip text font color +- in-out property font-italic : tip text font italic +- in-out property theme : tip theme +- in-out property wrap : tip text wrap +- in-out property overflow : tip text overflow +- in-out property letter-spacing : tip text letter spacing +- in-out property horizontal-alignment : tip text horizontal alignment +- in-out property vertical-alignment : tip text vertical alignment +- in-out property position : the position of tip +- in-out property is-show : tip is show or not +- in-out property text : tip text +- in property tip-width : tip width +## functions +- public function open() : open the tip +- public function close() : close the tip +- pure public function count-x(w:length) ->length : count x for angle +- pure public function count-y(w:length) ->length : count y for angle +## callbacks +- callback clicked() : use to open|close the tip diff --git a/src/components/form/form.md b/src/components/form/form.md new file mode 100644 index 0000000..81bb0c4 --- /dev/null +++ b/src/components/form/form.md @@ -0,0 +1,11 @@ +# Form + +|name|description| +|--|--| +|SInput(输入框组件)|This is a basic input box, often used in forms, divided into two types: text and password| +|SStar(评分组件)|SStar is a scoring component| +|SSelect(选择框组件)|SSelect is a selector that provides three types of optional input parameter values| +|SLink(链接组件)|SLink is commonly used to represent text connections or sharing| +|SRadio(单选框组件)|SRadio let people select a single item| +|SSwitch(选项组件)|SSwitch is a switch used for simple judgment scenarios| +|SSwitchGroup(选项组组件)|SSwitchGroup switch group can contain more switch cases| \ No newline at end of file diff --git a/src/components/form/input.md b/src/components/form/input.md new file mode 100644 index 0000000..6e4e2fb --- /dev/null +++ b/src/components/form/input.md @@ -0,0 +1,100 @@ +# SInput +This is a basic input box, often used in forms, divided into two types: text and password + +## examples + +### + +```rust +import {SText,SInput,SButton, SIcon,SPopup} from "../../index.slint"; +import {Themes} from "../../use/index.slint"; +import { TextEdit , LineEdit} from "std-widgets.slint"; +import { Invoke } from "./invoke_input.slint"; + +export component TestInput inherits Window { + height: 500px; + width: 600px; + + p:=SPopup { + Invoke {} + } + SInput{ + y: 20px; + placeholder :"please enter your username"; + card-width:300px; + clearable: true; + text:"SurrealismUI - input"; + accepted(res)=>{ + debug("content in input:" + res); + p.open(); + } + changed(change-res)=>{ + debug(change-res); + } + + } + + w:=SInput{ + y: 80px; + theme:Themes.Success; + type:InputType.password; + password:true; + } + SInput{ + y: 140px; + card-width: 20rem; + theme:Themes.Error; + disabled:true; + text:"disabled"; + } + SInput{ + y: 200px; + card-width: 18rem; + theme:Themes.Dark; + } + + SInput{ + y: 260px; + card-width: 160px; + theme:Themes.Warning; + clearable:true; + } + SInput{ + y: 320px; + card-width: 18rem; + theme:Themes.Info; + type:InputType.text; + clearable:true; + password:true; + text:"test password"; + + } +} +``` +## properties: +- in property font-weight : font weight for input +- in property placeholder: default placeholder which you wanna show when no text +- in property theme: Surrealism themes +- in property input-width: Please do not use width to adjust the length of the input box , use this property to instead +- in property font-size: font size +- in property disabled: can input be edited +- in property clearable: can input be cleared +- in property password: can the password input display the password +- out property has-focus : input is focused or not +- private property placeholder-color : placeholder color +- in-out property type : input type (text or password) +- in-out property font-color : font color +- in-out property icon-color : icon color +- in-out property text : the text of the input +## functions: +- pure public function get() ->string : get text +- public function set(text:string) : set text +- public function clear() : clear text +- public function select-all() : select all +- public function clear-selection() : clears the selection +- public function cut() : copies the selected text to the clipboard and removes it from the editable area +- public function copy() : copies the selected text to the clipboard +- public function paste() : pastes the text text of the clipboard at the cursor position +## callbacks: +- callback accepted(string) : run when pressed down enter key +- callback changed(string) : run when text changed diff --git a/src/components/form/link.md b/src/components/form/link.md new file mode 100644 index 0000000..f7a876f --- /dev/null +++ b/src/components/form/link.md @@ -0,0 +1,64 @@ +# SLink + +SLink is commonly used to represent text connections or sharing + +![](../../static/link.png) +## example +```rust +import {SLink} from "../../index.slint"; +import {Themes,UseIcons} from "../../use/index.slint"; + +component TestWindow inherits Window { + height: 420px; + width: 400px; + + SLink { + y: 100px; + theme: Dark; + text: "no underline"; + underline: false; + } + SLink { + y: 160px; + funny:true; + theme: Warning; + text: "funny for link!"; + font-italic : true; + font-weight: 200; + font-family : "Verdana"; + } + SLink { + y: 220px; + theme: Primary; + + icon: @image-url("../../icons/share-one.svg"); + text: "share one"; + } + SLink { + y: 280px; + funny:true; + theme: Error; + icon : @image-url("../../icons/share-sys.svg"); + font-size: 24px; + text: "share sys"; + clicked(link-text)=>{ + debug("share sys!") + } + } +} +``` +## properties +- in property icon : link share icon +- in property funny : use funny underline +- in property underline : has underline or not +- out property has-hover : link has hover or not +- in property mouse-cursor : link mouse cursor +- in property theme : SurrealismUI theme +- in property font-size : link font size +- in-out property text : link text +- in property font-weight : link font weight +- in property font-italic : link font italic +- in property font-family : link font family +- private property text-color : link text color +## callbacks +- callback clicked(string) : run if you click share icon diff --git a/src/components/form/radio.md b/src/components/form/radio.md new file mode 100644 index 0000000..ee01b86 --- /dev/null +++ b/src/components/form/radio.md @@ -0,0 +1,67 @@ +# SRadio + +SRadio let people select a single item + +![](../../static/radio.png) +## example +```rust +import {SRadio} from "../../index.slint"; +import {Themes} from "../../use/index.slint"; +import { SText } from "../../src/text/index.slint"; + +component TestCollection inherits Window { + height: 560px; + width: 600px; + background: #515c74; + VerticalLayout { + spacing: 20px; + padding: 20px; + SRadio{ + actived: true; + } + SRadio{theme: Light;} + SRadio{theme: Primary;} + SRadio {theme: Error;} + SRadio { + theme: Warning; + font-weight: 700; + text : "Chinese"; + font-color: #ff5e00; + font-italic: true; + font-family: "Verdana"; + } + SRadio { + theme: Info; + clicked(text,value,actived) => { + debug(text); + debug(value); + debug(actived); + } + } + SRadio{ + active-color : #4affae; + theme:Primary; + actived : true; + } + } +} +``` +## properties inherits Rectangle +- in property font-weight : display text font weight +- in property font-size: display text font size +- in property font-color : display text font color +- in property font-italic : display text font italic +- in property font-family : display text font family +- in property theme : SurrealismUI theme +- in property card-height: radio height (contain padding) +- in property card-width: radio width (contain padding) +- in property text : display text +- in-out property value : radio value +- in-out property actived : is actived or not +- in-out property active-color: active radio color +- in property padding-type : radio padding type +- in property shadow-type : radio shadow type +- in property border-type : radio border type +## functions +## callbacks +- callback clicked(string,string,bool) : run if you click the radio diff --git a/src/components/form/select.md b/src/components/form/select.md new file mode 100644 index 0000000..5de8880 --- /dev/null +++ b/src/components/form/select.md @@ -0,0 +1,68 @@ +# SSelect +SSelect is a selector that provides three types of optional input parameter values + +![](../../static/select.png) + +## example +```rust +import {SSelect} from "../../index.slint"; +import {Themes} from "../../use/index.slint"; +import { SButton } from "../../src/button/index.slint"; + +component TestWindow inherits Window { + height: 440px; + width: 400px; + SSelect { + y: 20px; + options: [ + {id:0,label:"Shangai",value:"s01"}, + {id:1,label:"Los Angeles",value:"l02"}, + {id:2,label:"New York",value:"n03"}, + {id:3,label:"Hong Kong",value:"h04"}, + ]; + } + + SSelect { + y: 200px; + font-weight: 700; + is-show: true; + theme: Error; + options: [ + {id:0,label:"Shangai",value:"s01"}, + {id:1,label:"Los Angeles",value:"l02"}, + {id:2,label:"New York",value:"n03"}, + {id:3,label:"Hong Kong",value:"h04"}, + ]; + changed(index,label,value)=>{ + debug(index); + debug(label); + debug(value); + } + } + t:=Text{ + y: 400px; + font-size: 16px; + in-out property index; + in-out property id; + in-out property label; + in-out property vt; + in-out property value; + text: @tr("Index:{} Id:{} Label:{} Value:{} ValueType:{}",index,id,label,value,vt); + } +} +``` + +## properties inherits SCard +- in property item-font-weight : select item font weight +- in property item-font-size: select item font size +- in property item-font-italic : select item font +- in property item-font-family : select item font +- in property <[SOption]> options : select options +- in property placeholder : select placeholder +- in-out property is-show : select is show or not +## functions +- public function open() : open select +- public function close() : close select +- public function toggle() : toggle status (if open then close) +## callbacks +- callback changed(int,string,string) : run if you choose an item of list diff --git a/src/components/form/star.md b/src/components/form/star.md new file mode 100644 index 0000000..abf5779 --- /dev/null +++ b/src/components/form/star.md @@ -0,0 +1,100 @@ +# SStar + +SStar is a scoring component + +## example +```rust +import {SStar,SButton} from "../../index.slint"; +import {Themes,UseIcons} from "../../use/index.slint"; + +component TestWindow inherits Window { + height: 400px; + width: 400px; + SStar { + y: 20px; + } + hs:=SStar { + score: 2.2; + y: 60px; + theme: Error; + + } + SButton { + y: 320px; + x:10px; + text: "add half"; + clicked => { + hs.add-half(); + } + } + SStar { + score : 3.8; + disabled: true; + y: 100px; + theme: Success; + } + os:=SStar { + max-score : 7; + score : 2.8; + y: 140px; + theme: Info; + } + SButton { + y: 320px; + x: 115px; + text: "add one"; + clicked => { + os.add-one(); + } + } + fs:=SStar { + max-score : 10; + score : 7.2; + y: 180px; + no-theme:true; + clicked(whole,half) => { + t.n = whole; + t.m = half; + } + } + SButton { + y: 320px; + x: 220px; + text: "get A"; + clicked => { + fs.full(); + } + } + SButton { + y: 320px; + x: 305px; + text: "clear"; + clicked => { + fs.clear(); + } + } + t:=Text{ + y: 250px; + font-size: 18px; + in-out property n; + in-out property m; + text: "whole stars:"+ n + " half stars:" + m; + } +} +``` +## properties +- in property no-theme : use Surrealism Theme or not +- in property score : the real score +- in property theme : Themes.Primary; +- in property disabled : can be scored if disabled is false +- in property max-score : max score (how many stars you wanna show) +## functions +- pure function get-half-stars()->bool : count the number of half stars ⛔ +- pure function get-whole-stars()->int : count the number of whole stars ⛔ +- pure function get-empty-stars()->int : count the number of empty stars ⛔ +- public function full() : star all 👍 +- public function clear() : no star 👍 +- public function add-one() : add one star 👍 +- public function add-half() : add half stars 👍 +## callbacks +- callback clicked(float,float) : get how many whole stars and half stars diff --git a/src/components/form/switch-group.md b/src/components/form/switch-group.md new file mode 100644 index 0000000..693d417 --- /dev/null +++ b/src/components/form/switch-group.md @@ -0,0 +1,51 @@ +# SSwitchGroup +SSwitchGroup switch group can contain more switch cases + +![](../../static/switch_group.png) + +## example +```rust +import { SSwitchGroup } from "../../index.slint"; +import { PaddingType } from "../../use/index.slint"; +component TestSwitchGroup inherits Window { + height: 400px; + width: 400px; + SSwitchGroup { + active: "2"; + theme: Primary; + width: 240px; + switchs:[ + {label:"Option1",value:"0"}, + {label:"Option2",value:"2"}, + {label:"Option3",value:"3"}, + ]; + clicked(i,name) => { + debug(i); + debug(name); + } + } + SSwitchGroup { + active: "1"; + y: 120px; + theme:Dark; + padding-type: PaddingType.Small; + switchs:[ + {label:"1",value:"0"}, + {label:"2",value:"2"}, + {label:"3",value:"3"}, + {label:"4",value:"1"}, + ]; + clicked(i,name) => { + debug(i); + debug(name); + } + } +} +``` +## properties inherits SCard +- in-out property active : active option value +- in-out property <[SOption]> switchs : switch options +- in property font-size : font size , it will effect switch component height +- private property theme-color : inner theme color +## callbacks +- callback clicked(int,SOption) : run if you click the switch , it will back option index and option name diff --git a/src/components/form/switch.md b/src/components/form/switch.md new file mode 100644 index 0000000..5b0be5f --- /dev/null +++ b/src/components/form/switch.md @@ -0,0 +1,58 @@ +# SSwitch + +SSwitch is a switch used for simple judgment scenarios + +![](../../static/switch.png) + +## example +```rust +import { SSwitch , SCard} from "../../index.slint"; + +component TestSwitch inherits Window { + height: 400px; + width: 400px; + + + VerticalLayout { + spacing: 20px; + padding: 20px; + SSwitch { + } + SSwitch { + active: true; + theme: Primary; + switch-background-color:#ddd; + switch-border-color:#ff00bb; + } + SSwitch { + theme: Dark; + active: false; + clicked(active-or-not)=>{ + debug(active-or-not); + } + } + SSwitch { + theme: Warning; + } + SSwitch { + theme: Error; + } + SSwitch { + theme: Info; + } + } +} +``` + +## properties +- in-out property active : is actived or not +- in property switch-background-color : switch background color +- in property switch-border-color : switch border color +- in property switch-drop-shadow-color switch drop shadow color +- in property switch-height : switch height +- in property switch-width : switch width +- in property switch-padding-type: switch padding type +- in property switch-shadow-type: switch shadow type +- in property switch-border-type : switch border type +## callbacks +- callback clicked(bool) : run if you click the switch diff --git a/src/components/nav/header.md b/src/components/nav/header.md new file mode 100644 index 0000000..23c6ea1 --- /dev/null +++ b/src/components/nav/header.md @@ -0,0 +1,46 @@ +# SHeader +SHeader is a simple header component that is generated based on routing information + +![](../../static/header.png) + +## example +```rust +import {SHeader} from "../../index.slint"; +import {Themes} from "../../use/index.slint"; + +component TestHeader inherits Window { + width: 600px; + height: 400px; + VerticalLayout { + padding: 30px; + spacing: 30px; + SHeader { + theme: Dark; + } + SHeader { + theme: Error; + } + SHeader { + theme: Primary; + font-size: 16px; + clicked(index,node)=>{ + txt.index = index; + txt.name = node.label; + } + } + txt:=Text{ + font-size: 18px; + in-out property index; + in-out property name; + text: "route-index:" + index + " route-name:" + name; + } + } +} +``` +## properties inherits SCard +- in property spacing : the spacing of header +- in property <[SOption]> value : route value of header +- in property source : split icon of header +## functions +## callbacks +- callback clicked(int,SOption) : run if you click the header diff --git a/src/components/nav/menu.md b/src/components/nav/menu.md new file mode 100644 index 0000000..118b732 --- /dev/null +++ b/src/components/nav/menu.md @@ -0,0 +1,41 @@ +# SMenu +SMenu is a menu bar located on the left side that you can quickly generate through the menu-data property + +![](../../static/menu.png) + +## example +```rust +import { SMenu , SIcon} from "../../index.slint"; +import {UseIcons} from "../../use/index.slint"; + +component TestMenu inherits Window { + height: 600px; + width: 300px; + Rectangle { + x: 0; + y: 0; + height:parent.height; + width: menu.width; + menu:=SMenu { + theme: Dark; + change(index,item)=>{ + debug(index); + debug(item); + } + clicked-account()=>{ + debug("clicked account"); + } + } + } +} +``` +## properties +- in-out property icon-box-size : menu item size ⛔ +- in-out property icon-size : menu item icon size ⛔; +- in property <[MenuData]> menu-data : menu item data (generate menus through it) +- in-out property active : which item is active +- private property hover-icon-color : menu item icon color changed when hover +## callbacks +- callback change(int,MenuData) : run if you click menu item +- callback clicked-account() : run if you click account icon +- callback clicked-setting() : run if you click setting icon diff --git a/src/components/nav/nav.md b/src/components/nav/nav.md new file mode 100644 index 0000000..f83ad46 --- /dev/null +++ b/src/components/nav/nav.md @@ -0,0 +1,7 @@ +# Nav + +|name|description| +|--|--| +|SHeader(页头组件)|SHeader is a simple header component that is generated based on routing information| +|SMenu(菜单组件)|SMenu is a menu bar located on the left side that you can quickly generate through the menu-data property| +|STab(标签页组件)|provide tab functionality, so that users can switch between different content sections| \ No newline at end of file diff --git a/src/components/nav/tab.md b/src/components/nav/tab.md new file mode 100644 index 0000000..f8bdc80 --- /dev/null +++ b/src/components/nav/tab.md @@ -0,0 +1,63 @@ +# STab + +provide tab functionality, so that users can switch between different content sections + +![](../../static/tab.png) + +## example +```rust +import { STab , STabPanel} from "../../index.slint"; +import { SText } from "../../src/text/index.slint"; +export component TestTab { + height: 400px; + width: 400px; + function show-panel(index:string) { + panel1.visible = false; + panel2.visible = false; + if(index==panel1.index){ + panel1.visible = true; + }else if(index==panel2.index){ + panel2.visible = true; + }else{ + panel1.visible = true; + } + } + STab { + tabs:[ + {label:"test1",value:"0"}, + {label:"test2",value:"1"}, + {label:"test3",value:"2"} + ]; + changed(kv) => { + show-panel(kv.value); + } + mounted(index) => { + show-panel(index); + } + panel1:=STabPanel { + index: "0"; + SText { + text: "This is a Panel -> test1"; + } + } + panel2:=STabPanel { + index: "1"; + SText { + text: "This is a Panel -> test2"; + } + } + } +} +``` +## properties inherits SCard +- in property theme : Surrealism Themes +- in property font-size : header font size +- in property font-weight : header font weight +- in property <[SOption]> tabs : tab datas +- in-out property active : active item +## functions +- function to-left() : let tab header to pre page +- function to-right() : let tab header to next page +## callbacks +- callback change(SOption) : run after you change the tab +- callback mounted(string) : run when init callback happend diff --git a/src/components/over-all.md b/src/components/over-all.md new file mode 100644 index 0000000..b30c220 --- /dev/null +++ b/src/components/over-all.md @@ -0,0 +1,62 @@ +# OverAll + +## Basic Components + +|name|description| +|--|--| +|SText(文字组件)|Display Text, SText inherits Text and add theme property| +|SButton(按钮组件)|SButton is a button component that you can freely perform regular properties operations on| +|SDivider(分割线)| A divider groups sections of content to create visual rhythm and hierarchy.Use dividers along with spacing and headers to organize content in your layout.| +|SIcon(图标)|this is a icon container, better than Image| +|SCard(卡片)|A very simple universal card without any layout or restrictions.You can add anything you want to the card| + +## Data Components + +|name|description| +|--|--| +|STag(标签组件)|A small tag used to display data| +|STable and STableColumn(表格组件)|The table is split into table header and table content| +|SCollapse and SCollapseItem(折叠面板组件)|Ability to collapse content| +|SAvatar(头像组件)|SAvatar is a avatar component that defaults to Icons.Avatar when there are no images available| +|SCollection(收缩盒组件)|SCollection is an expandable box that can be zoomed in or out by clicking (internal can also be used)| +|SPersona(个人信息组件)|This component is used to display simple user introduction information| +|SBadge(勋章组件)|SBadge is a quick way to display user status or events| +|SProgress(进度条组件)|SProgress is commonly used to display download progress or event processing progress.And you can fully control it through the progress property| +|STree(树型组件)|STree can be used to display directory structure, forming a parent-child relationship, and can be easily displayed| +|SFile(文件组件)|SFile can help users present file selectors GUI| +|SStep(步骤组件)|The Step component visualizes the progress of a sequence by breaking it down into individual steps. It allows for custom theming and supports indicating the current, completed, and pending steps through visual cues.| +|SPagination(分页器)|A component designed for navigating through pages, providing options for customization and various interactions.| +|SKeyBoard(虚拟键盘)|A customizable keyboard component for various input types including numbers, alphabets, and computer keyboard layouts.| + +## Form Components + +|name|description| +|--|--| +|SInput(输入框组件)|This is a basic input box, often used in forms, divided into two types: text and password| +|SStar(评分组件)|SStar is a scoring component| +|SSelect(选择框组件)|SSelect is a selector that provides three types of optional input parameter values| +|SLink(链接组件)|SLink is commonly used to represent text connections or sharing| +|SRadio(单选框组件)|SRadio let people select a single item| +|SSwitch(选项组件)|SSwitch is a switch used for simple judgment scenarios| +|SSwitchGroup(选项组组件)|SSwitchGroup switch group can contain more switch cases| + +## Nav Components + +|name|description| +|--|--| +|SHeader(页头组件)|SHeader is a simple header component that is generated based on routing information| +|SMenu(菜单组件)|SMenu is a menu bar located on the left side that you can quickly generate through the menu-data property| +|STab(标签页组件)|provide tab functionality, so that users can switch between different content sections| + +## Feedback Components + +|name|description| +|--|--| +|SResult(结果组件)|SResult helps you easily build a quick prompt , you can build it in popup window| +|SPopup(弹出框组件)|A masked popup layer appears in the current window.And users will not be able to use the popup layer to cover the components under it.Clicking on the popup layer again will close it| +|STip(提示组件)|A tip provides supplemental, contextual information elevated near its target component| +|SLoading(加载组件)|This is a loading component that you can embed anywhere you want to add a loading animation| +|SDialog(对话框组件)|SDialogs are used to confirm messages or events and display text| +|SDrawer(抽屉组件)|Sometimes, the Dialogue component does not meet our needs.Such as your form being too long, or if you need to temporarily display some documents, please use the SDrawer| +|SAlert(通知组件)|SAlert is used to display important prompt information on the page| +|SPopover(气泡卡片组件)|A customizable popover component designed to display contextual information or interactive content, attached to an element and floating above the UI. It supports various positions and can be shown or hidden programmatically.| \ No newline at end of file diff --git a/src/ecology.md b/src/ecology.md new file mode 100644 index 0000000..71d9480 --- /dev/null +++ b/src/ecology.md @@ -0,0 +1,19 @@ +# Ecology + +|Project Name|Description|Github Repo| +|------------|-----------|-------| +|Slint|Slint is a declarative GUI toolkit to build native user interfaces for desktop and embedded applications written in Rust, C++, or JavaScript|[Click Here](https://github.com/slint-ui/slint)| +|SurrealismUI|The Third Part Widgets Library for Slint|[Click Here](https://github.com/Surrealism-All/SurrealismUI)| +|SurrealismUI Book|The Book of SurrealismUI|[Click Here](https://github.com/Surrealism-All/SurrealismUI.github.io)| +|SurrealismUI Template|The Template of SurrealismUI + Slint|[Click Here](https://github.com/Surrealism-All/surrealism-ui-template)| +|SurrealismUI Update Plugin|VSCode Plugin for SurrealismUI Update|🔧 not done| + +## Other learning materials + +- [slint_learn](https://github.com/syf20020816/slint_learn): Help everyone quickly learn Slint + +## Video for Slint Learn + +- [Easy](https://www.bilibili.com/video/BV1r14y1k7T5/?spm_id_from=333.999.0.0&vd_source=9c2ae08297163e79152407c969f04717) +- [Advanced](https://www.bilibili.com/video/BV1e14y1r7YV/?spm_id_from=333.999.0.0&vd_source=9c2ae08297163e79152407c969f04717) +- [Slint With Rust](https://www.bilibili.com/video/BV14u411g7Xa/?spm_id_from=333.999.0.0&vd_source=9c2ae08297163e79152407c969f04717) \ No newline at end of file diff --git a/src/install/cargo-generate.md b/src/install/cargo-generate.md new file mode 100644 index 0000000..1f16f80 --- /dev/null +++ b/src/install/cargo-generate.md @@ -0,0 +1,32 @@ +# Cargo-Generate + +## 1. Install cargo-generate + +you can use the following command to install cargo-generate + +```bash +cargo install cargo-generate +``` + +## 2. generate your own project + +**input your project name to replace `{project_name}`** + +```bash +cargo generate --git https://github.com/Surrealism-All/surrealism-ui-template.git --name {project_name} +``` + +```bash +🔧 Destination: E:\Rust\test-surrealism ... +🔧 project-name: test-surrealism ... +🔧 Generating template ... +🔧 Moving generated files into: `E:\Rust\test-surrealism`... +🔧 Initializing a fresh Git repository +✨ Done! New project created E:\Rust\test-surrealism +``` + +## 3. run project + +```bash +cargo run +``` \ No newline at end of file diff --git a/src/install/github.md b/src/install/github.md new file mode 100644 index 0000000..a4e4c3e --- /dev/null +++ b/src/install/github.md @@ -0,0 +1,7 @@ +# Github + +1. GoTo:[Release](https://github.com/Surrealism-All/SurrealismUI/releases) +2. Find the latest release and download +3. unzip and add into your project + +![install](../static/dir.png) diff --git a/src/install/install.md b/src/install/install.md new file mode 100644 index 0000000..f7b0698 --- /dev/null +++ b/src/install/install.md @@ -0,0 +1,6 @@ +# Install + +This chapter will explain two installation methods: + +- Cargo Generate +- Github \ No newline at end of file diff --git a/src/quckstart.md b/src/quckstart.md new file mode 100644 index 0000000..6c7fab4 --- /dev/null +++ b/src/quckstart.md @@ -0,0 +1,140 @@ +# Quickstart + +

+If you use Cargo-Generate to build your project, you can skip this!
+Cargo Generate is a recommand way! +

+ +## Config SurrealismUI as Library (optional) + +1. Open VsCode and choose Settings , then search `Slint:Library Paths` +2. Choose edit in settings.json +3. Find `slint.libraryPaths` and add `"SurrealismUI":"parent_file_path\\surrealism-ui\\index.slint"`❗ + +```json + "slint.libraryPaths": { + "SurrealismUI":"E:\\test_try\\test-surrealism\\ui\\modules\\surrealism-ui\\index.slint" + }, +``` + + + +## Import and Use + +```rust +import { SMenu,SCard,SHeader,SIcon,SButton } from "../index.slint"; +import {UseIcons } from "../use/index.slint"; +import { STip } from "../src/tip/index.slint"; +import { STag } from "../src/tag/index.slint"; +import { SAlert } from "../src/alert/index.slint"; + +export component App inherits Window { + height: 600px; + width: 800px; + private property router-index : 0; + HorizontalLayout { + left-wrapper:=Rectangle { + z: 111; + height: 100%; + width: menu.width; + clip: false; + menu:=SMenu { + change(index,data) => { + debug(index); + } + } + } + right-wrapper:=Rectangle { + z: 100; + width: parent.width - menu.width; + background: #2b2b32; + if router-index==0:index-page:= Rectangle { + height: 100%; + width: 100%; + VerticalLayout { + HorizontalLayout { + padding: 8px; + alignment: center; + Rectangle { + height:header.height ; + width: parent.width - 16px; + header:=SHeader { + value: [{label:"SurrealismUI",value:"1"},{label:"menu:Index",value:"2"}]; + } + } + } + HorizontalLayout { + padding: 24px; + alignment: space-around; + STag { + theme: Warning; + text: "SurrealismUI V0.3.3"; + } + STag { + theme: Success; + text: "MIT License"; + } + STag { + theme: Error; + text: "For Slint!"; + } + STag { + theme: Error; + text: "author:syf20020816@outlook.com"; + } + } + HorizontalLayout { + alignment: center; + SCard { + card-width: 460px; + card-height: 320px; + SIcon { + height: parent.height; + width: parent.width; + source: @image-url("../README/imgs/logo.png"); + } + } + } + HorizontalLayout { + padding: 24px; + alignment: space-around; + SButton { + text: "Try SurrealismUI"; + clicked => { + alert.success("Try SurrealismUI!!! Let's GO!"); + } + } + + SButton { + show-icon: true; + icon: UseIcons.icons.Smiling-face; + theme: Primary; + text: "Star on Github!"; + } + STip { + text: "GO TO SurrealismUI WIKI?\n Click here!"; + height: wiki-btn.height; + width: wiki-btn.width; + position: Bottom; + wiki-btn:=SButton { + theme: Success; + text: "Read Wiki!~~~"; + clicked => { + parent.clicked(); + } + } + } + } + + } + } + } + } + alert:=SAlert { + result-type: Success; + text: ""; + } +} +``` + + \ No newline at end of file diff --git a/src/static/alert.png b/src/static/alert.png new file mode 100644 index 0000000..5f63447 Binary files /dev/null and b/src/static/alert.png differ diff --git a/src/static/avatar.png b/src/static/avatar.png new file mode 100644 index 0000000..e3adb60 Binary files /dev/null and b/src/static/avatar.png differ diff --git a/src/static/badge.png b/src/static/badge.png new file mode 100644 index 0000000..5952d35 Binary files /dev/null and b/src/static/badge.png differ diff --git a/src/static/button.png b/src/static/button.png new file mode 100644 index 0000000..2d56519 Binary files /dev/null and b/src/static/button.png differ diff --git a/src/static/card.png b/src/static/card.png new file mode 100644 index 0000000..74529b6 Binary files /dev/null and b/src/static/card.png differ diff --git a/src/static/collapse.png b/src/static/collapse.png new file mode 100644 index 0000000..53ef0da Binary files /dev/null and b/src/static/collapse.png differ diff --git a/src/static/collection.gif b/src/static/collection.gif new file mode 100644 index 0000000..4406e2c Binary files /dev/null and b/src/static/collection.gif differ diff --git a/src/static/config.png b/src/static/config.png new file mode 100644 index 0000000..51fb024 Binary files /dev/null and b/src/static/config.png differ diff --git a/src/static/dialog.png b/src/static/dialog.png new file mode 100644 index 0000000..323355c Binary files /dev/null and b/src/static/dialog.png differ diff --git a/src/static/dir.png b/src/static/dir.png new file mode 100644 index 0000000..669835c Binary files /dev/null and b/src/static/dir.png differ diff --git a/src/static/divider.png b/src/static/divider.png new file mode 100644 index 0000000..35d8828 Binary files /dev/null and b/src/static/divider.png differ diff --git a/src/static/drawer.png b/src/static/drawer.png new file mode 100644 index 0000000..11ea0ca Binary files /dev/null and b/src/static/drawer.png differ diff --git a/src/static/file.png b/src/static/file.png new file mode 100644 index 0000000..eed1f02 Binary files /dev/null and b/src/static/file.png differ diff --git a/src/static/header.png b/src/static/header.png new file mode 100644 index 0000000..77e85a4 Binary files /dev/null and b/src/static/header.png differ diff --git a/src/static/icon.png b/src/static/icon.png new file mode 100644 index 0000000..5b1cf16 Binary files /dev/null and b/src/static/icon.png differ diff --git a/src/static/input.png b/src/static/input.png new file mode 100644 index 0000000..c956fee Binary files /dev/null and b/src/static/input.png differ diff --git a/src/static/keyboard_all.png b/src/static/keyboard_all.png new file mode 100644 index 0000000..75d3049 Binary files /dev/null and b/src/static/keyboard_all.png differ diff --git a/src/static/keyboard_phone_alpha.png b/src/static/keyboard_phone_alpha.png new file mode 100644 index 0000000..b58a335 Binary files /dev/null and b/src/static/keyboard_phone_alpha.png differ diff --git a/src/static/keyboard_phone_number.png b/src/static/keyboard_phone_number.png new file mode 100644 index 0000000..07dce30 Binary files /dev/null and b/src/static/keyboard_phone_number.png differ diff --git a/src/static/link.png b/src/static/link.png new file mode 100644 index 0000000..ca83ebb Binary files /dev/null and b/src/static/link.png differ diff --git a/src/static/loading.png b/src/static/loading.png new file mode 100644 index 0000000..0fa25b0 Binary files /dev/null and b/src/static/loading.png differ diff --git a/src/static/logo copy.png b/src/static/logo copy.png new file mode 100644 index 0000000..1d2f8ae Binary files /dev/null and b/src/static/logo copy.png differ diff --git a/src/static/logo.png b/src/static/logo.png new file mode 100644 index 0000000..32ef008 Binary files /dev/null and b/src/static/logo.png differ diff --git a/src/static/menu.png b/src/static/menu.png new file mode 100644 index 0000000..c805522 Binary files /dev/null and b/src/static/menu.png differ diff --git a/src/static/page.png b/src/static/page.png new file mode 100644 index 0000000..10a9642 Binary files /dev/null and b/src/static/page.png differ diff --git a/src/static/pagination.png b/src/static/pagination.png new file mode 100644 index 0000000..d7d4c5d Binary files /dev/null and b/src/static/pagination.png differ diff --git a/src/static/persona.png b/src/static/persona.png new file mode 100644 index 0000000..1cd7fa3 Binary files /dev/null and b/src/static/persona.png differ diff --git a/src/static/popover.png b/src/static/popover.png new file mode 100644 index 0000000..d29a429 Binary files /dev/null and b/src/static/popover.png differ diff --git a/src/static/popup.png b/src/static/popup.png new file mode 100644 index 0000000..1e91ee8 Binary files /dev/null and b/src/static/popup.png differ diff --git a/src/static/progress.gif b/src/static/progress.gif new file mode 100644 index 0000000..891cfbd Binary files /dev/null and b/src/static/progress.gif differ diff --git a/src/static/quickstart.png b/src/static/quickstart.png new file mode 100644 index 0000000..30ca4c8 Binary files /dev/null and b/src/static/quickstart.png differ diff --git a/src/static/radio.png b/src/static/radio.png new file mode 100644 index 0000000..daab252 Binary files /dev/null and b/src/static/radio.png differ diff --git a/src/static/result.png b/src/static/result.png new file mode 100644 index 0000000..d42feab Binary files /dev/null and b/src/static/result.png differ diff --git a/src/static/select.png b/src/static/select.png new file mode 100644 index 0000000..82f15e1 Binary files /dev/null and b/src/static/select.png differ diff --git a/src/static/step.gif b/src/static/step.gif new file mode 100644 index 0000000..2c3dde5 Binary files /dev/null and b/src/static/step.gif differ diff --git a/src/static/step.mp4 b/src/static/step.mp4 new file mode 100644 index 0000000..f3cf9a4 Binary files /dev/null and b/src/static/step.mp4 differ diff --git a/src/static/switch.png b/src/static/switch.png new file mode 100644 index 0000000..fb9f85d Binary files /dev/null and b/src/static/switch.png differ diff --git a/src/static/switch_group.png b/src/static/switch_group.png new file mode 100644 index 0000000..f4c81f6 Binary files /dev/null and b/src/static/switch_group.png differ diff --git a/src/static/tab.png b/src/static/tab.png new file mode 100644 index 0000000..c9300b7 Binary files /dev/null and b/src/static/tab.png differ diff --git a/src/static/table.png b/src/static/table.png new file mode 100644 index 0000000..187ba7f Binary files /dev/null and b/src/static/table.png differ diff --git a/src/static/tag.png b/src/static/tag.png new file mode 100644 index 0000000..566e35b Binary files /dev/null and b/src/static/tag.png differ diff --git a/src/static/template.png b/src/static/template.png new file mode 100644 index 0000000..5ca1be4 Binary files /dev/null and b/src/static/template.png differ diff --git a/src/static/text.png b/src/static/text.png new file mode 100644 index 0000000..0eb9c08 Binary files /dev/null and b/src/static/text.png differ diff --git a/src/static/tip.png b/src/static/tip.png new file mode 100644 index 0000000..d338174 Binary files /dev/null and b/src/static/tip.png differ diff --git a/src/static/tree.png b/src/static/tree.png new file mode 100644 index 0000000..e690256 Binary files /dev/null and b/src/static/tree.png differ diff --git a/src/themes.md b/src/themes.md new file mode 100644 index 0000000..cc72676 --- /dev/null +++ b/src/themes.md @@ -0,0 +1,94 @@ +# Themes + +Built in 7 theme colors in SurrealismUI + +## themes-color + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Themeweakestweakernormaldeeperdeepestfontopacity
Light#F6F6F6#E0E0E0#FFFFFF#F6F6F6#F5F5F5#212121#E0E0E088
Primary#88D0EC#6CB8F7#3AA1F5#1891F3#0B86F1#e5ffff#3AA1F588
Success#8FCEC4#61BF84#38A762#21964A#118A3D#e5fffb#38A76288
Info#F6F6F6#eaeaea#E0E0E0#D2D2D2#BDBDBD#484848#E0E0E088
Warning#ffd5bd#FCBD99#F9A677#F9955C#F8894A#fff4ec#F9A67788
Error#e9a7a7#f48989#ed5e5e#ed4e4e#ed3b3b#ffe5e4#ed4e4e88
Dark#707070#616161#3a3a3a#242424#000000#e4e4e4#42424288
+ + diff --git a/src/updates.md b/src/updates.md new file mode 100644 index 0000000..2a36150 --- /dev/null +++ b/src/updates.md @@ -0,0 +1,90 @@ +# Updates + +- V0.4.1 + - 中文 + - 增加`SStep`进度指向线颜色效果 + - 增加`SPagination`分页器组件 + - 增加`SKeyBoard`虚拟键盘 (可使用子组件任意扩展) + - 增加`SButton`,`SCheckbox`,`SRadio`禁用选项 + - 增加`SDialog`非触摸位置关闭控制选项:`mask-close` + - 去除`SLoading`的默认初始化回调 + - English + - Increase the color effect of the progress pointing line in `SStep` + - Add the `SPagination` paginator component + - Add `SKeyBoard` virtual keyboard (it can be expanded with any sub components) + - Add disable options for `SButton`, `SCheckbox`, and `SRadio` + - Add `SDialog` non touch position close control option: `mask close` + - Remove the default initialization callback for `SLoading` +- V0.4.0 + - 中文 + - `SCheckbox`内部选择区添加 border,优化显示 + - `SProgress`样式优化,增加圆形进度条 + - 修复`SButton`在`STableColumnFlex`中的异常 + - 增加`SPopover`组件(气泡卡片无模态效果) + - 增加`SStep`组件(按步骤执行) + - English + - Add a border to the internal selection area of `SCheckbox` to optimize display + - Style optimization for `SProgress`, adding a circular progress bar + - Fix exceptions in `SButton` in `STableColumnFlex` + - Add the `SPopover` component (bubble card has no modal effect) + - Add the `SStep` component (do something step by step) +- V0.3.5 + - 中文 + - 增加`SCheckbox`(当用户需要多选时) + - English + - Add `SCheckbox`(when people want to select multi items) +- V0.3.4 + - 中文 + - 修复`SSelect`组件 icon、文字使用主题色变化 + - 增加`STab`组件提供选项卡功能,以便用户可以在不同的内容板块之间切换 + - English + - Fix changes in the theme color of the 'SSelect' component icon and text usage + - Add the 'STab' component to provide tab functionality, so that users can switch between different content sections +- V0.3.3 + - 中文 + - `SIcon`增加 state,hover 颜色效果 + - 重写`SMenu` + - 优化`STable`,增加表格列自定义组件 (see wiki [STable](https://github.com/Surrealism-All/SurrealismUI/wiki/07_Data-Components-%E6%95%B0%E6%8D%AE%E7%BB%84%E4%BB%B6#stable-%E8%A1%A8%E6%A0%BC)) + - English + - Add state and hover color effects to `SIcon` + - Rewrite `SMenu` + - Optimize `STable` , Add Self DefineComponent (see wiki [STable](https://github.com/Surrealism-All/SurrealismUI/wiki/07_Data-Components-%E6%95%B0%E6%8D%AE%E7%BB%84%E4%BB%B6#stable-%E8%A1%A8%E6%A0%BC)) +- V0.3.2 + + - 中文 + - `SSwitch`和`SSwitchGroup`增加响应式选择(由 active 属性进行控制) + - 优化`STip`文字显示 + - English + - `SSwitch` and `SSwitchGroup` add responsive selection (controlled by the active property) + - Optimize text display of `STip` + +- V0.3.1 + - 中文 + - 补充丢失的 SVG 图片 + - 修复组件中`PaddingType.None`以及`BorderType.None`产生的与 Rust 的`Option` 的编译冲突 + - 修复`SIcon`中 colorize 属性导致的闪烁和 None 冲突 + - `SIcon`弥补方案:`self.get-colorize()` + - English + - add missing SVG images + - fix the `PaddingType.None` and `BorderType.None` in the component Compilation conflict with Rust `Option` + - fix None conflict and flicker causes by colorize property in `SIcon` + - `SICon` Remedial solution:`self.get-colorize()` +- V0.3.0 (Slint 1.3.2) + - 中文 + - 所有组件更名`SUR`为`S` + - 默认文字采用`Arial` + - 重写所有组件 (`SMenu` 除外) + - 重构`themes/index.slint`(用于导出内置 Schema,内置 Global) + - 增加 use 方式导出内置方法,内置结构体,内置枚举等 + - 使用 use 方式对组件进行插槽预备 + - 修改内置主题色 + - 重构项目结构 + - English + - Renaming all components from `SUR` to `S` + - Default text adopts `Arial` + - Rewrite all components(except `SMenu`) + - Refactoring `themes/index. slint` (used to export built-in schemas, built-in Global) + - Add use mode to export built-in functions, built-in struct, built-in enum, etc + - Prepare slots for components using the use method + - Modify built-in theme colors + - Refactoring project structure