kael_ui 0.2.0

Professional shadcn-inspired UI component library for Kael. 100+ accessible components for building beautiful, performant desktop applications.
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

//! Test example for the scroll component

use kael::*;
use kael_ui::components::scrollable::scrollable_vertical;

struct ScrollTestApp;

impl Render for ScrollTestApp {
    fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
        div().flex().size_full().bg(rgb(0x1e1e2e)).child(
            div()
                .flex()
                .flex_col()
                .w(px(400.0))
                .h(px(300.0))
                .m(px(50.0))
                .bg(rgb(0x313244))
                .rounded_lg()
                .p(px(20.0))
                .child(
                    scrollable_vertical(div().flex().flex_col().gap(px(10.0)).children(
                        (0..50).map(|i| {
                            div()
                                .p(px(15.0))
                                .bg(rgb(0x45475a))
                                .rounded_md()
                                .child(format!("Item {}", i + 1))
                        }),
                    ))
                    .always_show_scrollbars(),
                ),
        )
    }
}

fn main() {
    Application::new().run(|cx| {
        // Initialize kael_ui
        kael_ui::init(cx);

        cx.open_window(
            WindowOptions {
                titlebar: Some(TitlebarOptions {
                    title: Some("Scroll Component Test".into()),
                    ..Default::default()
                }),
                window_bounds: Some(WindowBounds::Windowed(Bounds::centered(
                    None,
                    size(px(800.0), px(600.0)),
                    cx,
                ))),
                ..Default::default()
            },
            |_window, cx| cx.new(|_cx| ScrollTestApp),
        )
        .unwrap();
    });
}