add query context (#400)
This commit is contained in:
1 parent
251aafa5fd
commit
baaa1752d3
4 files changed
+144
-10
No files matched your search
@@ -0,0 +1,27 @@
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_tui::query::Query;
|
||||
use dioxus_tui::Size;
|
||||
|
||||
fn main() {
|
||||
dioxus::tui::launch(app);
|
||||
}
|
||||
|
||||
fn app(cx: Scope) -> Element {
|
||||
let hue = use_state(&cx, || 0.0);
|
||||
let brightness = use_state(&cx, || 0.0);
|
||||
let tui_query: Query = cx.consume_context().unwrap();
|
||||
cx.render(rsx! {
|
||||
div{
|
||||
width: "100%",
|
||||
background_color: "hsl({hue}, 70%, {brightness}%)",
|
||||
onmousemove: move |evt| {
|
||||
let node = tui_query.get(cx.root_node().mounted_id());
|
||||
let Size{width, height} = node.size().unwrap();
|
||||
let pos = evt.data.element_coordinates();
|
||||
hue.set((pos.x as f32/width as f32)*255.0);
|
||||
brightness.set((pos.y as f32/height as f32)*100.0);
|
||||
},
|
||||
"hsl({hue}, 70%, {brightness}%)",
|
||||
}
|
||||
})
|
||||
}
|
||||
Reference in new issue
Block a user