-
Notifications
You must be signed in to change notification settings - Fork 0
/
tabs.slint
57 lines (47 loc) · 1.35 KB
/
tabs.slint
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
export struct TabsData {
id: string,
text: string,
}
export component Tabs {
// now selected id, default is data[0].id
in-out property <string> id: data[0].id;
in property <[TabsData]> data;
in property <length> font_size: 14px;
in property <brush> color: black;
in property <length> spacing: 8px;
in property <MouseCursor> mouse_cursor: pointer;
in property <brush> active_color: deepskyblue;
callback clicked(TabsData);
// line default width
txt:= Text {text:data[0].text;font_size: font_size;visible: false;}
cont:= HorizontalLayout {
alignment: start;
spacing: spacing;
for tab in data: rect:= Rectangle {
Text {
text: tab.text;
color: id == tab.id ? active_color : color;
font_size: font_size;
}
TouchArea {
mouse-cursor: mouse_cursor;
clicked => {
id = tab.id;
line.x = rect.x;
line.width = rect.width;
clicked(tab);
}
}
}
}
line:= Rectangle {
x: 0px;
y: cont.height + 5px;
width: txt.width;
height: 2px;
background: active_color;
animate x,width {
duration: 300ms;
}
}
}