Mirrors/dioxus
2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2024-11-23 12:43:08 +00:00
Code Issues Projects Releases Packages Wiki Activity

change button example to showcase tabindex

Browse source
This commit is contained in:
Evan Almloff 2022-05-03 17:50:04 -05:00
parent 9ed722ae45
commit 592f6ca225
1 changed files with 68 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
examples/tui_buttons.rs
View file

@ -1,28 +1,51 @@
#![allow(non_snake_case)]
use dioxus::prelude::*;
use dioxus::{events::KeyCode, prelude::*};
fn main() {
dioxus::tui::launch(app);
}
fn Button(cx: Scope) -> Element {
let state = use_state(&cx, || false);
let color = if *state.get() { "red" } else { "blue" };
let text = if *state.get() { "☐" } else { "☒" };
#[derive(PartialEq, Props)]
struct ButtonProps {
color_offset: u32,
layer: u16,
}
#[allow(non_snake_case)]
fn Button(cx: Scope<ButtonProps>) -> Element {
let toggle = use_state(&cx, || false);
let hovered = use_state(&cx, || false);
let hue = cx.props.color_offset % 255;
let saturation = if *toggle.get() { 50 } else { 25 } + if *hovered.get() { 50 } else { 25 };
let brightness = saturation / 2;
let color = format!("hsl({hue}, {saturation}, {brightness})");
cx.render(rsx! {
div {
border_width: "1px",
width: "50%",
div{
width: "100%",
height: "100%",
background_color: "{color}",
tabindex: "{cx.props.layer}",
onkeydown: |e| {
if let KeyCode::Space = e.data.key_code{
toggle.modify(|f| !f);
}
},
onclick: |_| {
toggle.modify(|f| !f);
},
onmouseenter: |_|{
hovered.set(true);
},
onmouseleave: |_|{
hovered.set(false);
},
justify_content: "center",
align_items: "center",
onkeydown: |_| state.modify(|s| !s),
onclick: |_| state.modify(|s| !s),
display: "flex",
flex_direction: "column",
"{text}"
p{"tabindex: {cx.props.layer}"}
}
})
}
@ -30,31 +53,41 @@ fn Button(cx: Scope) -> Element {
fn app(cx: Scope) -> Element {
cx.render(rsx! {
div {
display: "flex",
flex_direction: "column",
width: "100%",
height: "100%",
flex_direction: "column",
div {
width: "100%",
height: "50%",
flex_direction: "row",
Button{},
Button{},
Button{},
Button{},
}
div {
width: "100%",
height: "50%",
flex_direction: "row",
Button{},
Button{},
Button{},
Button{},
}
(1..8).map(|y|
cx.render(rsx!{
div{
display: "flex",
flex_direction: "row",
width: "100%",
height: "100%",
(1..8).map(|x|{
if (x + y) % 2 == 0{
cx.render(rsx!{
div{
width: "100%",
height: "100%",
background_color: "rgb(100, 100, 100)",
}
})
}
else{
let layer = (x + y) % 3;
cx.render(rsx!{
Button{
color_offset: x * y,
layer: layer as u16,
}
})
}
})
}
})
)
}
})
}