1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
// Direct test of ScrollContainer vs raw GPUI
use kael::{
div, prelude::*, px, rgb, size, App, Application, Bounds, Context, FontWeight, Window,
WindowBounds, WindowOptions,
};
use kael_ui::prelude::*;
struct TestScrollContainer {}
impl Render for TestScrollContainer {
fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
div()
.size_full()
.flex()
.flex_col()
.gap_4()
.p_4()
.bg(kael::white())
.child(
div()
.font_weight(FontWeight::BOLD)
.child("Raw GPUI Pattern (WORKS):"),
)
.child(
// RAW GPUI - This works
div()
.h(px(200.))
.w_full()
.id("raw-scroll")
.overflow_y_scroll()
.border_1()
.border_color(kael::red())
.bg(rgb(0xfafafa))
.p_4()
.child(
div()
.h(px(800.))
.bg(rgb(0xdbeafe))
.p_4()
.child("✓ Tall content (800px) - THIS SCROLLS"),
),
)
.child(
div()
.font_weight(FontWeight::BOLD)
.child("ScrollContainer Pattern:"),
)
.child(
// OUR ScrollContainer
ScrollContainer::vertical()
.h(px(200.))
.w_full()
.border_1()
.border_color(kael::blue())
.bg(rgb(0xfafafa))
.p(px(12.0))
.child(
div()
.h(px(800.))
.bg(rgb(0xd1fae5))
.p_4()
.child("? Tall content (800px) - DOES THIS SCROLL?"),
),
)
}
}
fn main() {
Application::new().run(|cx: &mut App| {
let bounds = Bounds::centered(None, size(px(600.), px(600.0)), cx);
cx.open_window(
WindowOptions {
window_bounds: Some(WindowBounds::Windowed(bounds)),
..Default::default()
},
|_, cx| cx.new(|_| TestScrollContainer {}),
)
.unwrap();
cx.activate(true);
});
}