makepad_example_ui_zoo/
tab_textinput.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 DemoTextInput = <UIZooTabLayout_B> {
12 desc = {
13 <Markdown> { body: dep("crate://self/resources/textinput.md") }
14 }
15 demos = {
16 <H4> { text: "TextInput" }
17 <UIZooRowH> {
18 simpletextinput = <TextInput> { }
19 simpletextinput_outputbox = <P> {
20 text: "Output"
21 }
22 }
23
24 <Hr> {}
25 <H4> { text: "TextInput, Disabled" }
26 <TextInput> {
27 empty_text: "Inline Label"
28 animator: {
29 disabled = {
30 default: on
31 }
32 }
33 }
34
35 <Hr> {}
36 <H4> { text: "TextInput, customized" }
37 <TextInput> {
38 empty_text: "Inline Label"
39
40 width: Fill, height: Fit,
41 padding: <THEME_MSPACE_1> { left: (THEME_SPACE_2), right: (THEME_SPACE_2) }
42 margin: <THEME_MSPACE_V_1> {}
43 flow: RightWrap,
44 is_password: false,
45 is_read_only: false,
46 is_numeric_only: false
47 empty_text: "Your text here",
48
49 draw_bg: {
50 border_radius: (THEME_CORNER_RADIUS)
51 border_size: (THEME_BEVELING)
52
53 color_dither: 1.0
54
55 color: (THEME_COLOR_INSET)
56 color_hover: (THEME_COLOR_INSET_HOVER)
57 color_focus: (THEME_COLOR_INSET_FOCUS)
58 color_down: (THEME_COLOR_INSET_DOWN)
59 color_empty: (THEME_COLOR_INSET_EMPTY)
60 color_disabled: (THEME_COLOR_INSET_DISABLED)
61
62 border_color_1: (THEME_COLOR_BEVEL_INSET_2)
63 border_color_1_hover: (THEME_COLOR_BEVEL_INSET_2_HOVER)
64 border_color_1_focus: (THEME_COLOR_BEVEL_INSET_2_FOCUS)
65 border_color_1_down: (THEME_COLOR_BEVEL_INSET_2_DOWN)
66 border_color_1_empty: (THEME_COLOR_BEVEL_INSET_2_EMPTY)
67 border_color_1_disabled: (THEME_COLOR_BEVEL_INSET_2_DISABLED)
68
69 border_color_2: (THEME_COLOR_BEVEL_INSET_1)
70 border_color_2_hover: (THEME_COLOR_BEVEL_INSET_1_HOVER)
71 border_color_2_focus: (THEME_COLOR_BEVEL_INSET_1_FOCUS)
72 border_color_2_down: (THEME_COLOR_BEVEL_INSET_1_DOWN)
73 border_color_2_empty: (THEME_COLOR_BEVEL_INSET_1_EMPTY)
74 border_color_2_disabled: (THEME_COLOR_BEVEL_INSET_1_DISABLED)
75 }
76
77 draw_text: {
78 color: (THEME_COLOR_TEXT)
79 color_hover: (THEME_COLOR_TEXT_HOVER)
80 color_focus: (THEME_COLOR_TEXT_FOCUS)
81 color_down: (THEME_COLOR_TEXT_DOWN)
82 color_disabled: (THEME_COLOR_TEXT_DISABLED)
83 color_empty: (THEME_COLOR_TEXT_PLACEHOLDER)
84 color_empty_hover: (THEME_COLOR_TEXT_PLACEHOLDER_HOVER)
85 color_empty_focus: (THEME_COLOR_TEXT_FOCUS)
86
87 text_style: <THEME_FONT_REGULAR> {
88 line_spacing: (THEME_FONT_WDGT_LINE_SPACING),
89 font_size: (THEME_FONT_SIZE_P)
90 }
91 }
92
93 draw_selection: {
94 border_radius: (THEME_TEXTSELECTION_CORNER_RADIUS)
95
96 color: (THEME_COLOR_SELECTION)
97 color_hover: (THEME_COLOR_SELECTION_HOVER)
98 color_focus: (THEME_COLOR_SELECTION_FOCUS)
99 color_down: (THEME_COLOR_SELECTION_DOWN)
100 color_empty: (THEME_COLOR_SELECTION_EMPTY)
101 color_disabled: (THEME_COLOR_SELECTION_DISABLED)
102
103 }
104
105 draw_cursor: {
106 border_radius: 0.5
107 color: (THEME_COLOR_TEXT_CURSOR)
108 }
109 }
110
111 <Hr> {}
112 <H4> { text: "TextInput Inline Label" }
113 <TextInput> { empty_text: "Inline Label" }
114
115 <Hr> {}
116 <H4> { text: "TextInput with content" }
117 <TextInput> { text: "Some text" }
118
119 <Hr> {}
120 <H4> { text: "TextInputFlat" }
121 <TextInputFlat> { empty_text: "Inline Label" }
122
123 <Hr> {}
124 <H4> { text: "TextInputFlatter" }
125 <TextInputFlatter> { empty_text: "Inline Label" }
126
127 <Hr> {}
128 <H4> { text: "TextInputGradientX" }
129 <TextInputGradientX> { empty_text: "Inline Label" }
130
131 <Hr> {}
132 <H4> { text: "TextInputGradientY" }
133 <TextInputGradientY> { empty_text: "Inline Label" }
134
135 <Hr> {}
136 <H4> { text: "Styling Attributes Reference" }
137 <TextInput> {
138 width: Fill, height: Fit,
139 padding: <THEME_MSPACE_1> { left: (THEME_SPACE_2), right: (THEME_SPACE_2) }
140 margin: <THEME_MSPACE_V_1> {}
141 flow: RightWrap,
142 is_password: false,
143 is_read_only: false,
144 is_numeric_only: false
145
146 empty_text: "Inline Label"
147
148 draw_bg: {
149 border_radius: (THEME_CORNER_RADIUS)
150 border_size: (THEME_BEVELING)
151
152 color_dither: 1.0
153
154 color: (THEME_COLOR_INSET)
155 color_hover: (THEME_COLOR_INSET_HOVER)
156 color_focus: (THEME_COLOR_INSET_FOCUS)
157 color_down: (THEME_COLOR_INSET_DOWN)
158 color_empty: (THEME_COLOR_INSET_EMPTY)
159 color_disabled: (THEME_COLOR_INSET_DISABLED)
160
161 border_color_1: (THEME_COLOR_BEVEL_INSET_2)
162 border_color_1_hover: (THEME_COLOR_BEVEL_INSET_2_HOVER)
163 border_color_1_focus: (THEME_COLOR_BEVEL_INSET_2_FOCUS)
164 border_color_1_down: (THEME_COLOR_BEVEL_INSET_2_DOWN)
165 border_color_1_empty: (THEME_COLOR_BEVEL_INSET_2_EMPTY)
166 border_color_1_disabled: (THEME_COLOR_BEVEL_INSET_2_DISABLED)
167
168 border_color_2: (THEME_COLOR_BEVEL_INSET_1)
169 border_color_2_hover: (THEME_COLOR_BEVEL_INSET_1_HOVER)
170 border_color_2_focus: (THEME_COLOR_BEVEL_INSET_1_FOCUS)
171 border_color_2_down: (THEME_COLOR_BEVEL_INSET_1_DOWN)
172 border_color_2_empty: (THEME_COLOR_BEVEL_INSET_1_EMPTY)
173 border_color_2_disabled: (THEME_COLOR_BEVEL_INSET_1_DISABLED)
174 }
175
176 draw_text: {
177 color: (THEME_COLOR_TEXT)
178 color_hover: (THEME_COLOR_TEXT_HOVER)
179 color_focus: (THEME_COLOR_TEXT_FOCUS)
180 color_down: (THEME_COLOR_TEXT_DOWN)
181 color_disabled: (THEME_COLOR_TEXT_DISABLED)
182 color_empty: (THEME_COLOR_TEXT_PLACEHOLDER)
183 color_empty_hover: (THEME_COLOR_TEXT_PLACEHOLDER_HOVER)
184 color_empty_focus: (THEME_COLOR_TEXT_FOCUS)
185
186 text_style: {
187 font_size: (THEME_FONT_SIZE_P)
188 line_spacing: 1.2
189 }
190
191 }
192
193 draw_selection: {
194 border_radius: (THEME_TEXTSELECTION_CORNER_RADIUS)
195
196 color: (THEME_COLOR_SELECTION)
197 color_hover: (THEME_COLOR_SELECTION_HOVER)
198 color_focus: (THEME_COLOR_SELECTION_FOCUS)
199 color_down: (THEME_COLOR_SELECTION_DOWN)
200 color_empty: (THEME_COLOR_SELECTION_EMPTY)
201 color_disabled: (THEME_COLOR_SELECTION_DISABLED)
202 }
203
204 draw_cursor: {
205 border_radius: 0.5
206 color: (THEME_COLOR_TEXT_CURSOR)
207 }
208
209 }
210
211 }
212 }
213}