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 --git https://github.com/matthunz/lookbook

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

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

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

Run with dx serve!

Running examples

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