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

//! Sombras y animaciones de Aura UI en una pantalla. Funciona igual en escritorio, Android e iOS.
//!
//! ```bash
//! cargo run -p aura-gui --example vitrina
//! ```

use aura_ui::prelude::*;
use std::time::Duration;

struct Vitrina {
    abierto: bool,
}

fn tarjeta(titulo: &str, sombra: impl Into<Shadows>) -> Div {
    div()
        .w(px(120.0))
        .h(px(80.0))
        .center()
        .rounded_xl()
        .bg(Token::ElevatedSurface)
        .shadow(sombra)
        .child(titulo.to_owned())
}

impl View for Vitrina {
    fn view(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        let muelle = Animation::new(Duration::from_millis(600)).easing(Easing::SPRING);
        // Se desliza hacia el nuevo destino cada vez que cambia `abierto`, partiendo de donde iba.
        let desplazamiento = cx.transition("panel", if self.abierto { 180.0 } else { 0.0 }, muelle);
        let pulso =
            cx.animate("pulso", Animation::new(Duration::from_millis(900)).easing(Easing::EaseInOut).ping_pong());
        let entrada = Animation::new(Duration::from_millis(500)).easing(Easing::STANDARD);
        let fondo = cx.animate_between(
            "fondo",
            entrada,
            Rgba { r: 0.2, g: 0.4, b: 1.0, a: 0.0 },
            Rgba { r: 0.2, g: 0.4, b: 1.0, a: 1.0 },
        );

        div()
            .page()
            .items_start()
            .gap_6()
            .p_6()
            .child(
                div()
                    .flex_row()
                    .flex_wrap()
                    .gap_6()
                    .child(tarjeta("xs", ShadowPreset::Xs))
                    .child(tarjeta("md", ShadowPreset::Md))
                    .child(tarjeta("2xl", ShadowPreset::Xxl))
                    .child(tarjeta(
                        "capas",
                        Shadows::one(BoxShadow::new(0.0, 4.0, 6.0).spread(-1.0).strength(0.5))
                            .with(BoxShadow::new(0.0, 12.0, 24.0).spread(-4.0).strength(0.6)),
                    ))
                    .child(tarjeta("color", BoxShadow::new(0.0, 8.0, 20.0).color(fondo))),
            )
            .child(
                div()
                    .w(px(16.0))
                    .h(px(16.0))
                    .rounded_full()
                    .bg(Token::Accent)
                    .opacity(0.4 + 0.6 * pulso)
                    .glow(Token::Accent, 4.0 + 12.0 * pulso),
            )
            .child(
                Button::new(if self.abierto { "Cerrar" } else { "Abrir" })
                    .on_click(cx.toggle(|this| &mut this.abierto)),
            )
            .child(
                div()
                    .ml(px(desplazamiento))
                    .w(px(160.0))
                    .p_4()
                    .rounded_lg()
                    .bg(fondo)
                    .shadow_lg()
                    .child("Panel con muelle"),
            )
    }
}

aura_ui::app!(AppOptions::new("Vitrina").size(760.0, 520.0), Vitrina { abierto: false });