dioxus/packages/web/examples/jackjill.rs

50 lines
1.8 KiB
Rust
Raw Normal View History

use dioxus::prelude::*;
use dioxus_core as dioxus;
use dioxus_web::WebsysRenderer;
fn main() {
wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
console_error_panic_hook::set_once();
wasm_bindgen_futures::spawn_local(WebsysRenderer::start(Example))
}
2021-06-26 01:15:33 +00:00
static Example: FC<()> = |cx| {
let (name, set_name) = use_state(&cx, || "...?");
log::debug!("Running component....");
2021-06-26 01:15:33 +00:00
cx.render(html! {
<div>
<section class="py-12 px-4 text-center">
<div class="w-full max-w-2xl mx-auto">
// Tagline
<span class="text-sm font-semibold">
"Dioxus Example: Jack and Jill"
</span>
// Header
<h2 class="text-5xl mt-2 mb-6 leading-tight font-semibold font-heading">
"Hello, {name}"
</h2>
// Control buttons
<div>
<button
2021-02-28 22:22:23 +00:00
class="inline-block py-4 px-8 mr-6 leading-none text-white bg-indigo-600 hover:bg-indigo-900 font-semibold rounded shadow"
2021-03-29 16:31:47 +00:00
onclick={move |_| set_name("jack")}>
2021-06-23 05:44:48 +00:00
"Jack!"
</button>
<button
2021-03-01 05:16:48 +00:00
class="inline-block py-4 px-8 mr-6 leading-none text-white bg-indigo-600 hover:bg-indigo-900 font-semibold rounded shadow"
2021-03-29 16:31:47 +00:00
onclick={move |_| set_name("jill")}>
2021-03-01 05:16:48 +00:00
"Jill!"
</button>
</div>
</div>
</section>
</div>
})
};