grid_layout.rs

 1#![cfg_attr(target_family = "wasm", no_main)]
 2
 3use gpui::{
 4    App, Bounds, Context, Hsla, Window, WindowBounds, WindowOptions, div, prelude::*, px, rgb, size,
 5};
 6use gpui_platform::application;
 7
 8// https://en.wikipedia.org/wiki/Holy_grail_(web_design)
 9struct HolyGrailExample {}
10
11impl Render for HolyGrailExample {
12    fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
13        let block = |color: Hsla| {
14            div()
15                .size_full()
16                .bg(color)
17                .border_1()
18                .border_dashed()
19                .rounded_md()
20                .border_color(gpui::white())
21                .items_center()
22        };
23
24        div()
25            .gap_1()
26            .grid()
27            .bg(rgb(0x505050))
28            .size(px(500.0))
29            .shadow_lg()
30            .border_1()
31            .size_full()
32            .grid_cols(5)
33            .grid_rows(5)
34            .child(
35                block(gpui::white())
36                    .row_span(1)
37                    .col_span_full()
38                    .child("Header"),
39            )
40            .child(
41                block(gpui::red())
42                    .col_span(1)
43                    .h_56()
44                    .child("Table of contents"),
45            )
46            .child(
47                block(gpui::green())
48                    .col_span(3)
49                    .row_span(3)
50                    .child("Content"),
51            )
52            .child(
53                block(gpui::blue())
54                    .col_span(1)
55                    .row_span(3)
56                    .child("AD :(")
57                    .text_color(gpui::white()),
58            )
59            .child(
60                block(gpui::black())
61                    .row_span(1)
62                    .col_span_full()
63                    .text_color(gpui::white())
64                    .child("Footer"),
65            )
66    }
67}
68
69fn run_example() {
70    application().run(|cx: &mut App| {
71        let bounds = Bounds::centered(None, size(px(500.), px(500.0)), cx);
72        cx.open_window(
73            WindowOptions {
74                window_bounds: Some(WindowBounds::Windowed(bounds)),
75                ..Default::default()
76            },
77            |_, cx| cx.new(|_| HolyGrailExample {}),
78        )
79        .unwrap();
80        cx.activate(true);
81    });
82}
83
84#[cfg(not(target_family = "wasm"))]
85fn main() {
86    run_example();
87}
88
89#[cfg(target_family = "wasm")]
90#[wasm_bindgen::prelude::wasm_bindgen(start)]
91pub fn start() {
92    gpui_platform::web_init();
93    run_example();
94}