Skip to content

00_SurrealismUI

Jump to bottom
[email protected] edited this page Jan 21, 2024 · 3 revisions

SurrealismUI

logo

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

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

themes-color

Theme weakest weaker normal deeper deepest font opacity
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

image-20231225231237367

Wiki

https://github.com/Surrealism-All/SurrealismUI/wiki

Components

  • 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

Clone this wiki locally