07_Data Components 数据组件
A small tag used to display data
- in property text : text in tag
- pure public function get() -> string : get tag text
- public function set(value:string) : set tag text
- callback clicked(string) : run if you click the tag
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;
}
}
}
In fact, it is just the header of the table and needs to be used together with STableColumn or STableColumnFlex
- 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
- pure public function get-column-width(w:length,index:int)->length : get each column width depand on the index
- callback clicked(int,SOption) : run if click the Table Header
It is table body , it covers the data of the table , It is easy for just show text in Table
- in-out property index : column index
- in property <[string]> datas : column datas
- in property alignment : row text horizontal alignment
- pure public function count-column-height()->length : count column height
- callback clicked(int,int,string) : run if click the row item
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
It is a component used to describe a cell in a table , It can help you define tables more easily.
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!");
}
}
}
}
}
}
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 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
- 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
- pure public function get-height()->length : get collapse header height
- callback clicked() : run if you show collapse detail
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",
];
}
}
}
}
}
SAvatar is a avatar component that defaults to Icons.Avatar when there are no images available
- 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;
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");
}
}
}
SCollection is an expandable box that can be zoomed in or out by clicking (internal can also be used)
- 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;
- pure public function toggle-default(target:length)->length
- pure public function toggle(target:length,scale-size:float)->length
- clicked() : run if you click item in SCollection
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{
}
}
}
}
}
This component is used to display simple user introduction information
- 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
- callback clicked(SButtonProps): run if you click the buttons
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!";
}
}
SBadge is a quick way to display user status or events
- 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;
- pure public function get-x(p_right:length)->length 👍
- pure public function get-y(p_bottom:length)->length 👍
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;
}
}
}
SProgress is commonly used to display download progress or event processing progress
And you can fully control it through the progress property
- 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
- 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
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();
}
}
}
}
}
STree can be used to display directory structure, forming a parent-child relationship, and can be easily displayed
- 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
- callback clicked(int,string,string) : run if you click an item
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%;
}
}
SFile can help users present file selectors GUI
- 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
- pure function get-column-width(w:length,index:int)->length : get file item column width
- callback tab-clicked(int,SOption) : run if you click the tab
- callback item-clicked(int,int,FileItem) : run if you click a file item
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);
}
}
}
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.
- 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.
- 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).
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());
}
}
}
}
}
A customizable keyboard component for various input types including numbers, alphabets, and computer keyboard layouts.
- 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).
- callback clicked(SKeyItem): Triggered when a key is clicked, returning the key item clicked.
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);
}
}
}
}
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);
}
}
}
}
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);
}
}
}
}
A component designed for navigating through pages, providing options for customization and various interactions.
- 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.
- 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.
- 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.
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");
}
}
}
}
