matthunz / lookbook

Lookbook

UI preview framework for Dioxus

Demo

/// To-Do Task.
#[preview]
pub fn TaskPreview<'a>(
    cx: Scope<'a>,

    /// Label of the task.
    #[lookbook(default = "Ice skating")]
    label: &'a str,

    /// Content of the task.
    #[lookbook(default = "Central Park")]
    content: &'a str,
) -> Element<'a> {
    render!(
        div {
            h4 { "{label}" }
            p { "{content}" }
        }
    )
}

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 {
    render!(LookBook {
        home: |cx| render!("Home"),
        previews: [TaskPreview]
    })
}

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

Run with dx serve!

Running examples

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