Evan AlmloffandJonathan Kelley
20d146d9bd
* improve documentation for the fullstack server context * Add a section about axum integration to the crate root docs * make serve_dioxus_application accept the cfg builder directly * remove unused server_fn module * improve fullstack config docs * improve documentation for the server function macro * fix axum router extension link * Fix doc tests * Fix launch builder * Simplify the launch builder * don't re-export launch in the prelude * refactor fullstack launch * Fix fullstack launch builder * Update static generation with the new builder api * fix some formatting/overly broad launch replacements * fix custom menu example * fix fullstack/static generation examples * Fix static generation launch * A few small formatting fixes * Fix a few doc tests * implement LaunchConfig for serve configs * fix fullstack launch with separate web and server launch methods * fix check with all features * dont expose inner core module * clippy and check * fix readme --------- Co-authored-by: Jonathan Kelley <jkelleyrtp@gmail.com>
58 lines
2.1 KiB
Rust
58 lines
2.1 KiB
Rust
//! This example shows how to listen to all events on a div and log them to the console.
|
|
//!
|
|
//! The primary demonstration here is the properties on the events themselves, hoping to give you some inspiration
|
|
//! on adding interactivity to your own application.
|
|
|
|
use dioxus::prelude::*;
|
|
use std::{collections::VecDeque, fmt::Debug, rc::Rc};
|
|
|
|
const STYLE: &str = asset!("./examples/assets/events.css");
|
|
|
|
fn main() {
|
|
dioxus::launch(app);
|
|
}
|
|
|
|
fn app() -> Element {
|
|
// Using a VecDeque so its cheap to pop old events off the front
|
|
let mut events = use_signal(VecDeque::new);
|
|
|
|
// All events and their data implement Debug, so we can re-cast them as Rc<dyn Debug> instead of their specific type
|
|
let mut log_event = move |event: Rc<dyn Debug>| {
|
|
// Only store the last 20 events
|
|
if events.read().len() >= 20 {
|
|
events.write().pop_front();
|
|
}
|
|
events.write().push_back(event);
|
|
};
|
|
|
|
rsx! {
|
|
head::Link { rel: "stylesheet", href: STYLE }
|
|
div { id: "container",
|
|
// focusing is necessary to catch keyboard events
|
|
div { id: "receiver", tabindex: 0,
|
|
onmousemove: move |event| log_event(event.data()),
|
|
onclick: move |event| log_event(event.data()),
|
|
ondoubleclick: move |event| log_event(event.data()),
|
|
onmousedown: move |event| log_event(event.data()),
|
|
onmouseup: move |event| log_event(event.data()),
|
|
|
|
onwheel: move |event| log_event(event.data()),
|
|
|
|
onkeydown: move |event| log_event(event.data()),
|
|
onkeyup: move |event| log_event(event.data()),
|
|
onkeypress: move |event| log_event(event.data()),
|
|
|
|
onfocusin: move |event| log_event(event.data()),
|
|
onfocusout: move |event| log_event(event.data()),
|
|
|
|
"Hover, click, type or scroll to see the info down below"
|
|
}
|
|
div { id: "log",
|
|
for event in events.read().iter() {
|
|
div { "{event:?}" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|