2021-07-09 03:25:27 +00:00
|
|
|
//! Example: README.md showcase
|
|
|
|
//!
|
|
|
|
//! The example from the README.md
|
|
|
|
|
|
|
|
use dioxus::prelude::*;
|
|
|
|
fn main() {
|
2021-07-09 16:47:41 +00:00
|
|
|
dioxus::desktop::launch(App, |c| c).expect("faield to launch");
|
2021-07-09 03:25:27 +00:00
|
|
|
}
|
|
|
|
|
2021-07-18 07:54:42 +00:00
|
|
|
pub static App: FC<()> = |cx| {
|
|
|
|
let count = use_state(cx, || 0);
|
|
|
|
let mut direction = use_state(cx, || 1);
|
2021-07-09 03:25:27 +00:00
|
|
|
|
2021-07-18 07:54:42 +00:00
|
|
|
let (async_count, dir) = (count.for_async(), *direction);
|
2021-07-27 15:28:05 +00:00
|
|
|
let (task, _result) = use_task(cx, move || async move {
|
2021-07-15 03:18:02 +00:00
|
|
|
loop {
|
2021-07-18 07:54:42 +00:00
|
|
|
gloo_timers::future::TimeoutFuture::new(250).await;
|
|
|
|
*async_count.get_mut() += dir;
|
2021-07-15 03:18:02 +00:00
|
|
|
}
|
|
|
|
});
|
2021-07-09 03:25:27 +00:00
|
|
|
|
2021-07-09 16:47:41 +00:00
|
|
|
cx.render(rsx! {
|
|
|
|
div {
|
2021-07-18 07:54:42 +00:00
|
|
|
h1 {"count is {count}"}
|
|
|
|
button {
|
|
|
|
"Stop counting"
|
|
|
|
onclick: move |_| task.stop()
|
|
|
|
}
|
|
|
|
button {
|
|
|
|
"Start counting"
|
2021-09-02 03:22:34 +00:00
|
|
|
onclick: move |_| task.resume()
|
2021-07-18 07:54:42 +00:00
|
|
|
}
|
|
|
|
button {
|
|
|
|
"Switch counting direcion"
|
|
|
|
onclick: move |_| {
|
|
|
|
direction *= -1;
|
|
|
|
task.restart();
|
|
|
|
}
|
|
|
|
}
|
2021-07-09 16:47:41 +00:00
|
|
|
}
|
|
|
|
})
|
|
|
|
};
|