codify "platform" into resolution logic, server-fn/fullstack overhaul (#4596)
overhaul dioxus fullstack using a new implementation of server_fn This PR is a complete rewrite of dioxus fullstack designed to improve compatibility with axum and to fix a number of compilation errors based on feature flag unification plumbing through macros.
This commit is contained in:
1 parent
8421c3aef0
commit
f2b1c6d97f
424 files changed
+17284
-6624
No files matched your search
@@ -0,0 +1,71 @@
|
||||
//! 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: Asset = 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);
|
||||
};
|
||||
|
||||
let random_text = "This is some random repeating text. ".repeat(1000);
|
||||
|
||||
rsx! {
|
||||
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 {
|
||||
style: "padding: 50px;",
|
||||
div {
|
||||
style: "text-align: center; padding: 20px; font-family: sans-serif; overflow: auto; height: 400px;",
|
||||
onscroll: move |event: Event<ScrollData>| {
|
||||
log_event(event.data());
|
||||
},
|
||||
div { style: "margin: 20px; padding: 15px; border: 1px solid #ccc; border-radius: 5px;",
|
||||
p { "{random_text}" }
|
||||
}
|
||||
}
|
||||
}
|
||||
div { id: "log",
|
||||
for event in events.read().iter() {
|
||||
div { "{event:?}" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user