content_mask.rs
1use gpui::{
2 App, Application, Bounds, Context, Window, WindowBounds, WindowOptions, div, prelude::*, px,
3 rgb, size,
4};
5
6struct Example {}
7
8impl Render for Example {
9 fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
10 div()
11 .font_family(".SystemUIFont")
12 .flex()
13 .flex_col()
14 .size_full()
15 .p_4()
16 .gap_4()
17 .bg(rgb(0x505050))
18 .justify_center()
19 .items_center()
20 .text_center()
21 .shadow_lg()
22 .text_sm()
23 .text_color(rgb(0xffffff))
24 .child(
25 div()
26 .overflow_hidden()
27 .rounded(px(32.))
28 .border(px(8.))
29 .border_color(gpui::white())
30 .text_color(gpui::white())
31 .child(
32 div()
33 .bg(gpui::black())
34 .py_2()
35 .px_7()
36 .border_l_2()
37 .border_r_2()
38 .border_b_3()
39 .border_color(gpui::red())
40 .child("Let build applications with GPUI"),
41 )
42 .child(
43 div()
44 .bg(rgb(0x222222))
45 .text_sm()
46 .py_1()
47 .px_7()
48 .border_l_3()
49 .border_r_3()
50 .border_color(gpui::green())
51 .child("The fast, productive UI framework for Rust"),
52 )
53 .child(
54 div()
55 .bg(rgb(0x222222))
56 .w_full()
57 .flex()
58 .flex_row()
59 .text_sm()
60 .text_color(rgb(0xc0c0c0))
61 .child(
62 div()
63 .flex_1()
64 .p_2()
65 .border_3()
66 .border_dashed()
67 .border_color(gpui::blue())
68 .child("Rust"),
69 )
70 .child(
71 div()
72 .flex_1()
73 .p_2()
74 .border_t_3()
75 .border_r_3()
76 .border_b_3()
77 .border_dashed()
78 .border_color(gpui::blue())
79 .child("GPU Rendering"),
80 ),
81 ),
82 )
83 .child(
84 div()
85 .flex()
86 .flex_col()
87 .w(px(320.))
88 .gap_1()
89 .overflow_hidden()
90 .rounded(px(16.))
91 .child(
92 div()
93 .w_full()
94 .p_2()
95 .bg(gpui::red())
96 .child("Clip background"),
97 ),
98 )
99 .child(
100 div()
101 .flex()
102 .flex_col()
103 .w(px(320.))
104 .gap_1()
105 .rounded(px(16.))
106 .child(
107 div()
108 .w_full()
109 .p_2()
110 .bg(gpui::yellow())
111 .text_color(gpui::black())
112 .child("No content mask"),
113 ),
114 )
115 .child(
116 div()
117 .flex()
118 .flex_col()
119 .w(px(320.))
120 .gap_1()
121 .overflow_hidden()
122 .rounded(px(16.))
123 .child(
124 div()
125 .w_full()
126 .p_2()
127 .border_4()
128 .border_color(gpui::blue())
129 .bg(gpui::blue().alpha(0.4))
130 .child("Clip borders"),
131 ),
132 )
133 .child(
134 div()
135 .flex()
136 .flex_col()
137 .w(px(320.))
138 .gap_1()
139 .overflow_hidden()
140 .rounded(px(20.))
141 .child(
142 div().w_full().border_2().border_color(gpui::black()).child(
143 div()
144 .size_full()
145 .bg(gpui::green().alpha(0.4))
146 .p_2()
147 .border_8()
148 .border_color(gpui::green())
149 .child("Clip nested elements"),
150 ),
151 ),
152 )
153 .child(
154 div()
155 .flex()
156 .flex_col()
157 .w(px(320.))
158 .gap_1()
159 .overflow_hidden()
160 .rounded(px(32.))
161 .child(
162 div()
163 .w_full()
164 .p_2()
165 .bg(gpui::black())
166 .border_2()
167 .border_dashed()
168 .rounded_lg()
169 .border_color(gpui::white())
170 .child("dash border full and rounded"),
171 )
172 .child(
173 div()
174 .w_full()
175 .flex()
176 .flex_row()
177 .gap_2()
178 .child(
179 div()
180 .w_full()
181 .p_2()
182 .bg(gpui::black())
183 .border_x_2()
184 .border_dashed()
185 .rounded_lg()
186 .border_color(gpui::white())
187 .child("border x"),
188 )
189 .child(
190 div()
191 .w_full()
192 .p_2()
193 .bg(gpui::black())
194 .border_y_2()
195 .border_dashed()
196 .rounded_lg()
197 .border_color(gpui::white())
198 .child("border y"),
199 ),
200 )
201 .child(
202 div()
203 .w_full()
204 .p_2()
205 .bg(gpui::black())
206 .border_2()
207 .border_dashed()
208 .border_color(gpui::white())
209 .child("border full and no rounded"),
210 ),
211 )
212 }
213}
214
215fn main() {
216 Application::new().run(|cx: &mut App| {
217 let bounds = Bounds::centered(None, size(px(800.), px(600.)), cx);
218 cx.open_window(
219 WindowOptions {
220 window_bounds: Some(WindowBounds::Windowed(bounds)),
221 ..Default::default()
222 },
223 |_, cx| cx.new(|_| Example {}),
224 )
225 .unwrap();
226 cx.activate(true);
227 });
228}