Lookbook
UI preview framework for Dioxus
```rs
/// 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>,
) -> 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.
```sh
cargo add lookbook --git https://github.com/matthunz/lookbook
```
Then create a preview like the one above and add it to a lookbook.
```rust
fn app() -> Element {
rsx!(LookBook {
home: |()| rsx!("Home"),
previews: [TaskPreview]
})
}
fn main() {
dioxus_web::launch(app)
}
```
Run with `dx serve`!
## Running examples
Run the examples with `dx serve --example {name}`.