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

[syf20020816]

Wish

I hope this third-party library can help Slint enthusiasts, although the current version only has 12 components, I will continue to iterate

SurrealismUI

• author：[email protected]
• createDate：20230908
• updateDate：20230908
• version：0.0.1
• email：[email protected]
• github ：https://github.com/syf20020816/SurrealismUI

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

components

• SURText : It is the simplest and most common component in SurrealismUI
• SURButton : SURButton is a button component that you can freely perform regular attribute operations on
• SURIcon : there are 2658 different icons in SURIcon from : https://github.com/bytedance/iconpark
• SURInput : This is a basic input box, often used in forms, divided into two types : text and password
• SURCard : A very simple universal card without any layout or restrictions , you can add anything you want to the card
• SURStar : SURStar is a scoring component
• SURSelect : SURSelect is a selector that provides three types of optional input parameter values
• SURTag : A small tag used to display data
• SURHeader : SURHeader is a simple header component that is generated based on routing information
• SURTable : This is the outter of the Table, and the column data of the table is separated from the outter , The outter only serves as a standard layout , this is a zero cost construction
• SURTableColumn : SURTableColumn is a component of SURTable, and each SURTableColumn forms a complete column of the table . If it's gone, the table will become a card with a horizontal layout
• SURCollapse : SURCollapse is a foldable panel
• SURCollapseItem : SURCollapseItem is a component of SURCollapse, without which SURCollapse will not work . You can customize the components or use the default text display method in it
• SURResult : SURResult helps you easily build a quick prompt , you can build it in popup window

[ogoffart]

Hi,

This is quite an impressive work. Thank you for posting.

I haven't even seen any bug report from you. I'd love to hear your thoughts and experiences with Slint. Are there areas where you think we could make improvements or anything else you'd like to share?

We're thinking of featuring your library on https://madewithslint.com, where we showcase projects made with our framework.

[FoundationKen]

@ogoffart I ended up here from a Google search because I want to customize things like colors, sizes, animations, and shapes of some components like Button, Switch, Checkbox, etc. I can't find any information on how that sort of customization is supposed to be done, though.

I see there are some built-in styles you can choose from, so this seems to be built-in at some level, but I don't see any information on how to make one yourself.

Am I just missing it, or is what they did in SurrealismUI what someone needs to do if I want a fully custom theme in Slint right now? In other words, do I have to create my own Button, Switch, Checkbox, etc. to get a different style?

Thanks.

[syf20020816]

Hi
You can use ROOT_STYLES in SurrealismUI to Define your component

1. import {ROOT_STYLES,Themes} from "surrealism_version/themes/index.slint";
2. write your define component
   like:

import {ROOT_STYLES,Themes} from "surrealism_version/themes/index.slint";
export component DefineComponent inherits Rectangle{
  in property<Themes> theme;
  // ...
}

3. use a global in-out property to control all component theme
   like:

global MyApp{
   in-out property<Themes> G-Theme : Themes.Light
}

4. use define Component or SurrealismUI Component and pass theme
   like:

export component MainWindow inherits Window{
   DefineComponent{ theme:MyApp.G-Theme; }
   SURButton{
     theme:MyApp.G-Theme;
   }
}

note❗ : If the component you want to customize already exists in SurrealismUI , yo can inherits them
like:

component MyDefine inherits SURCard{  //...  }

[ogoffart]

is what they did in SurrealismUI what someone needs to do if I want a fully custom theme in Slint right now?

That's correct. This is the way right now.

I also wish there was a better way, but I'm unsure how it should look like (tracked in #45)