mottes-floem-components 0.1.0

Some styled components for floem.
Documentation 
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

use std::fs;

use floem::{
    peniko::Color,
    prelude::{RwSignal, SignalGet},
    unit::Pct,
    views::{button, container, h_stack, label, text_input, toggle_button, v_stack, Decorators},
    IntoView,
};
use mottes_floem_components::{
    classes::{
        construct_theme, BadgeFive, BadgeFour, BadgeOne, BadgeThree, BadgeTwo, Button, Label,
        RadioButton, TextInput, ToggleButton,
    },
    theme::Theme,
    views::{
        accordion_item, avatar, labeled_checkbox, labeled_radio_button, progress_bar, separator,
        slider,
    },
};

fn view(theme: Theme<'static>) -> impl IntoView {
    let text = RwSignal::new(String::new());
    let checked = RwSignal::new(false);
    let slider_pct = RwSignal::new(Pct::from(50.0));
    let active_id = RwSignal::new(1);

    container(h_stack((
        v_stack((
            button("Button").class(Button),
            label(|| "Label").class(Label),
            text_input(text).placeholder("Text input").class(TextInput),
            toggle_button(|| true).class(ToggleButton),
            avatar(
                || {
                    fs::read("examples/silly_robot_avatar.png")
                        .expect("failed to read avatar picture")
                },
                50,
                theme,
            ),
        ))
        .style(|s| s.padding(10).gap(10).width(150)),
        separator(theme),
        v_stack((
            labeled_checkbox(checked, || "Checkbox", theme)
                .style(|s| s.align_self(Some(floem::taffy::AlignItems::Start))),
            labeled_radio_button(checked.get(), checked, || "Radio button", theme)
                .class(RadioButton),
            label(|| "Badge 1").class(BadgeOne),
            label(|| "Badge 2").class(BadgeTwo),
            label(|| "Badge 3").class(BadgeThree),
            label(|| "Badge 4").class(BadgeFour),
            label(|| "Badge 5").class(BadgeFive),
        ))
        .style(|s| s.padding(10).gap(10).width(150)),
        separator(theme),
        v_stack((
            slider(slider_pct, theme),
            progress_bar(slider_pct, theme),
            accordion_item(
                label(|| "I'm some text").class(Label),
                || "Accordion item 0",
                0,
                active_id,
                theme,
            ),
            accordion_item(
                label(|| "I'm some more text").class(Label),
                || "Accordion item 1",
                1,
                active_id,
                theme,
            ),
            accordion_item(
                label(|| "Fuck facists, btw").class(Label),
                || "Accordion item 2",
                2,
                active_id,
                theme,
            ),
        ))
        .style(|s| s.padding(10).gap(10).width(150)),
    )))
    .style(move |_| {
        construct_theme(theme)
            .height_full()
            .width_full()
            .justify_center()
            .items_center()
            .background(Color::parse(theme.base00).unwrap())
    })
}

fn split_view() -> impl IntoView {
    h_stack((view(Theme::dark()), view(Theme::light()))).style(|s| s.height_full().width_full())
}

fn main() {
    floem::launch(split_view);
}