makepad_example_ui_zoo/
tab_button.rs1use crate::{
2 makepad_widgets::*,
3};
4
5live_design!{
6 use link::theme::*;
7 use link::shaders::*;
8 use link::widgets::*;
9 use crate::layout_templates::*;
10
11 pub DemoButton = <UIZooTabLayout_B> {
12 desc = {
13 <Markdown> { body: dep("crate://self/resources/button.md") }
14 }
15 demos = {
16 <H4> { text: "Standard"}
17 <UIZooRowH> {
18 basicbutton = <Button> { text: "<Button>" }
19
20 iconbutton = <Button> {
21 draw_icon: {
22 color: #f00,
23 svg_file: dep("crate://self/resources/Icon_Favorite.svg"),
24 }
25 text: "<Button>"
26 }
27 }
28
29 <Hr> {}
30 <H4> { text: "Standard, disabled"}
31 <UIZooRowH> {
32 <Button> {
33 text: "<Button>"
34 animator: {
35 disabled = {
36 default: on
37 }
38 }
39 }
40 }
41
42 <Hr> {}
43 <H4> { text: "ButtonIcon"}
44 <UIZooRowH> {
45 <ButtonIcon> {
46 draw_icon: {
47 color: #f00,
48 svg_file: dep("crate://self/resources/Icon_Favorite.svg"),
49 }
50 text: ""
51 }
52 }
53
54 <Hr> {}
55 <H4> { text: "GradientX"}
56 <UIZooRowH> {
57 <ButtonGradientX> { text: "<ButtonGradientX>" }
58 <ButtonGradientX> {
59 draw_bg: {
60 border_radius: 1.0,
61 border_radius: 4.0
62
63 color_1: #C00
64 color_1_hover: #F0F
65 color_1_down: #800
66
67 color_2: #0CC
68 color_2_hover: #0FF
69 color_2_down: #088
70
71 border_color_1: #C
72 border_color_1_hover: #F
73 border_color_1_down: #0
74
75 border_color_2: #3
76 border_color_2_hover: #6
77 border_color_2_down: #8
78
79 }
80 text: "<ButtonGradientX>"
81 }
82
83 }
84
85 <Hr> {}
86 <H4> { text: "ButtonGradientXIcon"}
87 <UIZooRowH> {
88 <ButtonGradientXIcon> {
89 draw_icon: {
90 color: #f00,
91 svg_file: dep("crate://self/resources/Icon_Favorite.svg"),
92 }
93 }
94 }
95
96
97 <Hr> {}
98 <H4> { text: "GradientY"}
99 <UIZooRowH> {
100 <ButtonGradientY> { text: "<ButtonGradientY>" }
101 <ButtonGradientY> {
102 draw_bg: {
103 border_radius: 1.0,
104 border_radius: 4.0
105
106 color_1: #C00
107 color_1_hover: #F0F
108 color_1_down: #800
109
110 color_2: #0CC
111 color_2_hover: #0FF
112 color_2_down: #088
113
114 border_color_1: #C
115 border_color_1_hover: #F
116 border_color_1_down: #0
117
118 border_color_2: #3
119 border_color_2_hover: #6
120 border_color_2_down: #8
121
122 }
123 text: "<ButtonGradientY>"
124 }
125
126 }
127
128 <Hr> {}
129 <H4> { text: "ButtonGradientYIcon"}
130 <UIZooRowH> {
131 <ButtonGradientYIcon> {
132 draw_icon: {
133 color: #f00,
134 svg_file: dep("crate://self/resources/Icon_Favorite.svg"),
135 }
136 }
137 }
138
139 <Hr> {}
140 <H4> { text: "Flat"}
141 <UIZooRowH> {
142 <ButtonFlat> {
143 draw_icon: {
144 color: #f00,
145 svg_file: dep("crate://self/resources/Icon_Favorite.svg"),
146 }
147 text: "<ButtonFlat>"
148 }
149
150 <ButtonFlat> {
151 flow: Down,
152 icon_walk: { width: 15. }
153 draw_icon: {
154 svg_file: dep("crate://self/resources/Icon_Favorite.svg"),
155 }
156 text: "<ButtonFlat>"
157 }
158 }
159
160 <Hr> {}
161 <H4> { text: "ButtonFlatIcon"}
162 <UIZooRowH> {
163 <ButtonFlatIcon> {
164 draw_icon: {
165 color: #f00,
166 svg_file: dep("crate://self/resources/Icon_Favorite.svg"),
167 }
168 }
169 }
170
171 <Hr> {}
172 <H4> { text: "Flatter"}
173 <UIZooRowH> {
174 <ButtonFlatter> {
175 draw_icon: {
176 color: #f00,
177 svg_file: dep("crate://self/resources/Icon_Favorite.svg"),
178 }
179 text: "<ButtonFlatter>"
180 }
181 }
182
183 <Hr> {}
184 <H4> { text: "ButtonFlatterIcon"}
185 <UIZooRowH> {
186 <ButtonFlatterIcon> {
187 draw_icon: {
188 color: #f00,
189 svg_file: dep("crate://self/resources/Icon_Favorite.svg"),
190 }
191 }
192 }
193
194 <Hr> {}
195 <H4> { text: "Styling Attributes Reference"}
196 <UIZooRowH> {
197 <Button> {
198 width: Fit
199 text: "<Button>"
200
201 draw_text: {
202 color: (THEME_COLOR_LABEL_INNER)
203 color_hover: (THEME_COLOR_LABEL_INNER_HOVER)
204 color_down: (THEME_COLOR_LABEL_INNER_DOWN)
205 color_focus: (THEME_COLOR_LABEL_INNER_FOCUS)
206 color_disabled: (THEME_COLOR_LABEL_INNER_DISABLED)
207
208 text_style: {
209 font_size: (THEME_FONT_SIZE_P)
210 line_spacing: 1.2
211 }
212 }
213
214 icon_walk: {
215 width: (THEME_DATA_ICON_WIDTH),
216 height: Fit,
217 }
218
219 draw_icon: {
220 color: (THEME_COLOR_LABEL_INNER)
221 color_hover: (THEME_COLOR_LABEL_INNER_HOVER)
222 color_down: (THEME_COLOR_LABEL_INNER_DOWN)
223 color_focus: (THEME_COLOR_LABEL_INNER_FOCUS)
224 color_disabled: (THEME_COLOR_LABEL_INNER_DISABLED)
225
226 svg_file: dep("crate://self/resources/Icon_Favorite.svg"),
227 }
228
229 draw_bg: {
230 color_dither: 1.0
231
232 border_size: (THEME_BEVELING)
233 border_radius: (THEME_CORNER_RADIUS)
234
235 color: (THEME_COLOR_OUTSET)
236 color_hover: (THEME_COLOR_OUTSET_HOVER)
237 color_down: (THEME_COLOR_OUTSET_DOWN)
238 color_focus: (THEME_COLOR_OUTSET_FOCUS)
239 color_disabled: (THEME_COLOR_OUTSET_DISABLED)
240
241 border_color_1: (THEME_COLOR_BEVEL_OUTSET_1)
242 border_color_1_hover: (THEME_COLOR_BEVEL_OUTSET_1_HOVER)
243 border_color_1_down: (THEME_COLOR_BEVEL_OUTSET_1_DOWN)
244 border_color_1_focus: (THEME_COLOR_BEVEL_OUTSET_1_FOCUS)
245 border_color_1_disabled: (THEME_COLOR_BEVEL_OUTSET_1_DISABLED)
246
247 border_color_2: (THEME_COLOR_BEVEL_OUTSET_2)
248 border_color_2_hover: (THEME_COLOR_BEVEL_OUTSET_2_HOVER)
249 border_color_2_down: (THEME_COLOR_BEVEL_OUTSET_2_DOWN)
250 border_color_2_focus: (THEME_COLOR_BEVEL_OUTSET_2_FOCUS)
251 border_color_2_disabled: (THEME_COLOR_BEVEL_OUTSET_2_DISABLED)
252 }
253
254 }
255 }
256
257 }
258 }
259}