Lookbook

UI preview framework for Dioxus

Demo

/// To-Do Task.
#[preview]
pub fn TaskPreview(
    /// Label of the task.
    #[lookbook(default = "Ice skating")]
    label: String,

    /// Content of the task.
    #[lookbook(default = "Central Park")]
    content: String,

    /// List of tags.
    #[lookbook(default = vec![String::from("A")])]
    tags: Json<Vec<String>>,
) -> Element {
    rsx!(
        div {
            h4 { "{label}" }
            p { "{content}" }
            div { { tags.0.iter().map(|tag| rsx!(li { "{tag}" })) } }
        }
    )
}

#[component]
fn app() -> Element {
    rsx!(LookBook {
        home: |()| rsx!("Home"),
        previews: [TaskPreview]
    })
}

fn main() {
    dioxus::launch(app)
}

Usage

First add Lookbook as a dependency to your project.

cargo add lookbook@v0.2.0-alpha.1

Then create a preview like the one above and add it to a lookbook.

fn app() -> Element {
    rsx!(LookBook {
        home: |()| rsx!("Home"),
        previews: [TaskPreview]
    })
}

fn main() {
    dioxus::launch(app)
}

Run with dx serve!

Supported platforms

• Web
• Desktop/mobile https://github.com/matthunz/lookbook/issues/5
• Blitz https://github.com/matthunz/lookbook/issues/6

Running examples

Run the examples with dx serve --example {name}.