desktop_example/app/routes/
widgets.rs

1use freya::{
2    material_design::{
3        ButtonRippleExt,
4        MenuItemRippleExt,
5        Ripple,
6    },
7    prelude::*,
8};
9
10#[derive(PartialEq)]
11pub struct WidgetsDemo;
12
13impl Component for WidgetsDemo {
14    fn render(&self) -> impl IntoElement {
15        let mut theme = use_theme();
16        let is_dark = *theme.read() == DARK_THEME;
17
18        let mut slider_value = use_state(|| 50.0f64);
19
20        let values = use_hook(|| {
21            vec![
22                "Rust".to_string(),
23                "TypeScript".to_string(),
24                "Python".to_string(),
25            ]
26        });
27        let mut selected = use_state(|| 0usize);
28
29        ScrollView::new()
30            .width(Size::fill())
31            .height(Size::fill())
32            .child(
33                rect()
34                    .width(Size::fill())
35                    .padding(16.)
36                    .spacing(20.)
37                    .child(
38                        rect().spacing(8.).child("Dark Theme").child(
39                            Switch::new()
40                                .expanded()
41                                .toggled(is_dark)
42                                .on_toggle(move |_| {
43                                    if is_dark {
44                                        theme.set(LIGHT_THEME);
45                                    } else {
46                                        theme.set(DARK_THEME);
47                                    }
48                                }),
49                        ),
50                    )
51                    .child(
52                        rect()
53                            .spacing(8.)
54                            .child(format!("Slider: {}%", slider_value().floor()))
55                            .child(
56                                Slider::new(move |v| slider_value.set(v))
57                                    .value(slider_value())
58                                    .size(Size::fill()),
59                            )
60                            .child(ProgressBar::new(slider_value().floor() as f32)),
61                    )
62                    .child(
63                        rect().spacing(8.).child("Language").child(
64                            Select::new()
65                                .selected_item(values[selected()].to_string())
66                                .children(values.iter().enumerate().map(|(i, val)| {
67                                    MenuItem::new()
68                                        .selected(selected() == i)
69                                        .on_press(move |_| selected.set(i))
70                                        .ripple()
71                                        .child(val.to_string())
72                                        .into()
73                                })),
74                        ),
75                    )
76                    .child(Button::new().expanded().ripple().child("Ripple Button"))
77                    .child(ripple_card(
78                        (230, 230, 240),
79                        (30, 30, 30),
80                        None::<Color>,
81                        "Tap for ripple",
82                    ))
83                    .child(ripple_card(
84                        (255, 240, 240),
85                        (30, 30, 30),
86                        Some((255, 80, 80)),
87                        "Red ripple",
88                    )),
89            )
90    }
91}
92
93fn ripple_card(
94    bg: impl Into<Color>,
95    fg: impl Into<Color>,
96    ripple_color: Option<impl Into<Color>>,
97    text: &str,
98) -> impl IntoElement {
99    let mut ripple = Ripple::new();
100
101    if let Some(color) = ripple_color {
102        ripple = ripple.color(color);
103    }
104
105    ripple.child(
106        rect()
107            .width(Size::fill())
108            .height(Size::px(80.))
109            .center()
110            .background(bg)
111            .corner_radius(12.)
112            .color(fg)
113            .child(text),
114    )
115}
desktop_example/app/routes/widgets.rs

desktop_example/app/routes/
widgets.rs
