floem-css 0.2.0

Hot reloading css-like styles 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

use std::path::PathBuf;

use floem::keyboard::NamedKey;
use floem::views::{button, container, text, v_stack, Button, Decorators, Label};
use floem::{IntoView, View};
use floem_css::{theme_provider, ProviderOptions, StyleCss};

fn main() {
    // Enable logging to see info and errors
    env_logger::builder()
        .filter_level(log::LevelFilter::Off)
        .filter_module("floem_css", log::LevelFilter::Debug)
        .init();

    // Styles are read from path. Modify the css file to instantly see changes in app.
    // Path can point to file or folder.
    let options = ProviderOptions {
        path: PathBuf::from("examples/style.css"),
        ..Default::default()
    };

    // Wrap your app in theme_provider
    floem::launch(|| theme_provider(main_view, options))
}

fn light_button(lbl: &'static str) -> Button {
    button(lbl).css("button button-light")
}

fn dark_button(lbl: &'static str) -> Button {
    button(lbl).css("button button-dark")
}

fn h3(lbl: &str) -> Label {
    text(lbl).css("h3")
}

fn main_view() -> impl IntoView {
    let button_light_1 = light_button("Light button 1");
    let button_light_2 = light_button("Light button 2");
    let button_dark_1 = dark_button("Dark button 1");
    let button_dark_2 = dark_button("Dark button 2");
    let some_header_1 = h3("Light buttons");
    let some_header_2 = h3("Dark buttons");
    let stack = v_stack((
        some_header_1,
        button_light_1,
        button_light_2,
        some_header_2,
        button_dark_1,
        button_dark_2,
    ))
    .css(".button-stack");
    let main = container(stack).css("body");
    let id = main.id();
    main.keyboard_navigable().on_key_up(
        NamedKey::F11.into(),
        |m| m.is_empty(),
        move |_| id.inspect(),
    )
}