aura-gui 0.2.2

UI nativa acelerada por GPU para escritorio, Android e iOS, en un solo crate: estilo tipo Tailwind, componentes, sombras, animaciones y agentes de IA. Reposo a cero. Licencia AGPL-3.0 o comercial.
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

//! Transformaciones, apilado y desenfoque de Tailwind en una sola ventana.
//!
//! ```bash
//! cargo run -p aura-gui --example transformaciones
//! AURA_SNAPSHOT=captura.png cargo run -p aura-gui --example transformaciones   # guarda un frame y cierra
//! ```

#![cfg_attr(all(windows, not(debug_assertions)), windows_subsystem = "windows")]

use aura_ui::prelude::*;

struct Demo;

fn tile(label: &'static str, color: Rgba) -> Div {
    div()
        .size_24()
        .flex_col()
        .items_center()
        .justify_center()
        .rounded_xl()
        .bg(color)
        .border_2()
        .border_color(palette::white().with_alpha(0.6))
        .shadow_lg()
        .text_color(palette::white())
        .child(text(label).font_semibold())
}

impl View for Demo {
    fn view(&mut self, _: &mut ViewContext<Self>) -> impl IntoElement {
        use palette::*;
        div()
            .size_full()
            .flex_col()
            .gap_8()
            .p_8()
            .bg(slate(900))
            .text_color(slate(100))
            .child(text("Transformaciones").text_2xl().font_semibold())
            .child(
                div()
                    .flex_row()
                    .gap_8()
                    .child(tile("normal", blue(500)))
                    .child(tile("rotate 12", indigo(500)).rotate_12())
                    .child(tile("scale 125", emerald(500)).scale_125())
                    .child(tile("skew x 12", rose(500)).skew_x_12())
                    .child(tile("translate", amber(500)).translate_x_4().translate_y_2())
                    .child(tile("rotate 45", violet(500)).rotate_45().scale_75()),
            )
            .child(text("Apilado (z-index)").text_xl().font_semibold())
            .child(
                div()
                    .relative()
                    .h_32()
                    .child(tile("z-0", blue(600)).absolute().left_0().top_0())
                    .child(tile("z-20", rose(600)).absolute().left_12().top_4().z_20())
                    .child(tile("z-10", emerald(600)).absolute().left_24().top_8().z_10()),
            )
            .child(text("Desenfoque").text_xl().font_semibold())
            .child(
                div()
                    .relative()
                    .h_40()
                    .rounded_xl()
                    .overflow_hidden()
                    .flex_row()
                    .child(div().w_1_4().h_full().bg(rose(500)))
                    .child(div().w_1_4().h_full().bg(amber(400)))
                    .child(div().w_1_4().h_full().bg(emerald(500)))
                    .child(div().w_1_4().h_full().bg(blue(500)))
                    .child(
                        div()
                            .absolute()
                            .left_8()
                            .top_6()
                            .w_64()
                            .h_28()
                            .rounded_2xl()
                            .backdrop_blur_xl()
                            .bg(white().with_alpha(0.15))
                            .border()
                            .border_color(white().with_alpha(0.4))
                            .items_center()
                            .justify_center()
                            .child(text("backdrop-blur-xl").font_semibold().text_color(white())),
                    )
                    .child(
                        div()
                            .absolute()
                            .right_8()
                            .top_6()
                            .size_28()
                            .rounded_full()
                            .bg(slate(900))
                            .items_center()
                            .justify_center()
                            .blur_sm()
                            .child(text("blur-sm").text_color(white())),
                    ),
            )
    }
}

aura_ui::app!(AppOptions::new("Transformaciones"), Demo);