SurrealismUI
A third-party UI library using Slint, I think it will give you an extraordinary experience
Install / Use
/learn @Surrealism-All/SurrealismUIREADME
<img src="https://img.shields.io/badge/SurrealismUI-0.5.3-orange?style=flat-square&logo=rust&logoColor=%23fff&labelColor=%23DEA584&color=%23DEA584"> <img src="https://img.shields.io/badge/License-MIT-orange?style=flat-square&logoColor=%23fff&labelColor=%2323B898&color=%2323B898">
SurrealismUI
- author：syf20020816@outlook.com
- createDate：20230908
- updateDate：20241208
- version：0.5.3
- email：syf20020816@outlook.com
- discord：Surrealism-UI
- book：SurrealismUI Book
SurrealismUI is a third-party component library built entirely using Slint
Install
use cargo-generate
1. Install cargo-generate
you can use the following command to install cargo-generate
cargo install cargo-generate
2. generate your own project
input your project name to replace {project_name}
cargo generate --git https://github.com/Surrealism-All/surrealism-ui-template.git --name {project_name}
🔧 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
cargo run
Github
- GoTo ：https://github.com/Surrealism-All/SurrealismUI/releases
- Find the latest release and download
- unzip and add into your project
QuickStart
Config SurrealismUI as Library (optional)
- Open VsCode and choose Settings , then search
Slint:Library Paths - Choose edit in settings.json
- Find
slint.libraryPathsand add"SurrealismUI":"parent_file_path\\surrealism-ui\\index.slint"❗
"slint.libraryPaths": {
"SurrealismUI":"E:\\test_try\\test-surrealism\\ui\\modules\\surrealism-ui\\index.slint"
},
Import and Use
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 <int> 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: "";
}
}
What SurrealismUI Do？
default
————————————————————————————————————
| logic control layer (Rust|C++) |
————————————————————————————————————
⇕
————————————————————————————————————
| UI layer (write components) |
————————————————————————————————————
SurrealismUI
————————————————————————————————————
| logic control layer (Rust|C++) |
————————————————————————————————————
⇕
————————————————————————————————————
| UI Styles Wrapper layer | <-- What SurrealismUI do , see ①
————————————————————————————————————
| UI layer (write components) |
————————————————————————————————————
①：define a lot replaceable theme styles and binding styles use theme property , can be customized in slint file or logic control layer , means: all system components are wrapped (Customizing themes in third-party component libraries is very affordable as it acts on the UI layer. slint is like an integration of HTML and CSS, so I use this way)(By binding global singleton variables to styles, any component that uses variables can change styles simultaneously)
System support (like iced)
———————————————————————————————————— ————————————————
| logic control | --> | Theme::Light |
———————————————————————————————————— ————————————————
| UI layer | ↓
———————————————————————————————————— |————————————|
↑ ↓ ↓
import ← Light_Theme Styles Dark_Theme Styles
## Diff
Slint differs from other GUI frameworks in that the UI layer is completed through. slint, which I believe is good and brings many advantages (compatibility with different platforms, instant preview, maintainability, parallel development, etc.). But this also leads to SLIT being unable to easily customize the theme of the component. Theme customization and switching are dynamic to static processes, which require a lot of logical processing, and this is also same as (HTML+CSS+js | ts)
Themes
Built in 7 theme colors in SurrealismUI
