1use gpui::{
2 div, linear_color_stop, linear_gradient, pattern_horizontal_dash, pattern_slash,
3 pattern_vertical_dash, prelude::*, px, rgb, size, App, AppContext, Application, Bounds,
4 Context, Window, WindowBounds, WindowOptions,
5};
6
7struct PatternExample;
8
9impl Render for PatternExample {
10 fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
11 div()
12 .flex()
13 .flex_col()
14 .gap_3()
15 .bg(rgb(0xffffff))
16 .size(px(600.0))
17 .justify_center()
18 .items_center()
19 .shadow_lg()
20 .text_xl()
21 .text_color(rgb(0x000000))
22 .child("Pattern Example")
23 .child(
24 div()
25 .flex()
26 .gap_4()
27 .child(
28 div()
29 .flex()
30 .flex_col()
31 .gap_1()
32 .child(
33 div()
34 .w(px(160.0))
35 .h(px(1.0))
36 .bg(pattern_horizontal_dash(gpui::red())),
37 )
38 .child(
39 div()
40 .w(px(160.0))
41 .h(px(4.0))
42 .bg(pattern_horizontal_dash(gpui::red())),
43 )
44 .child(
45 div()
46 .w(px(160.0))
47 .h(px(8.0))
48 .bg(pattern_horizontal_dash(gpui::red())),
49 ),
50 )
51 .child(
52 div()
53 .flex()
54 .gap_1()
55 .child(
56 div()
57 .w(px(1.0))
58 .h(px(160.0))
59 .bg(pattern_vertical_dash(gpui::blue())),
60 )
61 .child(
62 div()
63 .w(px(4.0))
64 .h(px(160.0))
65 .bg(pattern_vertical_dash(gpui::blue())),
66 )
67 .child(
68 div()
69 .w(px(8.0))
70 .h(px(160.0))
71 .bg(pattern_vertical_dash(gpui::blue())),
72 ),
73 ),
74 )
75 .child(
76 div()
77 .flex()
78 .flex_col()
79 .border_1()
80 .border_color(gpui::blue())
81 .child(div().w(px(54.0)).h(px(18.0)).bg(pattern_slash(gpui::red())))
82 .child(div().w(px(54.0)).h(px(18.0)).bg(pattern_slash(gpui::red())))
83 .child(div().w(px(54.0)).h(px(18.0)).bg(pattern_slash(gpui::red())))
84 .child(div().w(px(54.0)).h(px(18.0)).bg(pattern_slash(gpui::red()))),
85 )
86 .child(
87 div()
88 .flex()
89 .flex_col()
90 .border_1()
91 .border_color(gpui::blue())
92 .bg(gpui::green().opacity(0.16))
93 .child("Elements the same height should align")
94 .child(
95 div()
96 .w(px(256.0))
97 .h(px(56.0))
98 .bg(pattern_slash(gpui::red())),
99 )
100 .child(
101 div()
102 .w(px(256.0))
103 .h(px(56.0))
104 .bg(pattern_slash(gpui::green())),
105 )
106 .child(
107 div()
108 .w(px(256.0))
109 .h(px(56.0))
110 .bg(pattern_slash(gpui::blue())),
111 )
112 .child(
113 div()
114 .w(px(256.0))
115 .h(px(26.0))
116 .bg(pattern_slash(gpui::yellow())),
117 ),
118 )
119 .child(
120 div()
121 .border_1()
122 .border_color(gpui::blue())
123 .w(px(240.0))
124 .h(px(40.0))
125 .bg(gpui::red()),
126 )
127 .child(
128 div()
129 .border_1()
130 .border_color(gpui::blue())
131 .w(px(240.0))
132 .h(px(40.0))
133 .bg(linear_gradient(
134 45.,
135 linear_color_stop(gpui::red(), 0.),
136 linear_color_stop(gpui::blue(), 1.),
137 )),
138 )
139 }
140}
141
142fn main() {
143 Application::new().run(|cx: &mut App| {
144 let bounds = Bounds::centered(None, size(px(600.0), px(600.0)), cx);
145 cx.open_window(
146 WindowOptions {
147 window_bounds: Some(WindowBounds::Windowed(bounds)),
148 ..Default::default()
149 },
150 |_window, cx| cx.new(|_cx| PatternExample),
151 )
152 .unwrap();
153
154 cx.activate(true);
155 });
156}