2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2024-12-21 10:03:13 +00:00
dioxus/packages/dioxus-tui/examples/text.rs

114 lines
3 KiB
Rust
Raw Normal View History

2022-01-01 04:53:37 +00:00
use dioxus::prelude::*;
fn main() {
dioxus_tui::launch(app);
2022-01-01 04:53:37 +00:00
}
fn app(cx: Scope) -> Element {
let alpha = use_state(cx, || 100);
2022-02-17 22:06:28 +00:00
2022-01-01 04:53:37 +00:00
cx.render(rsx! {
div {
width: "100%",
height: "100%",
flex_direction: "column",
onwheel: move |evt| alpha.set((**alpha + evt.inner().delta().strip_units().y as i64).clamp(0, 100)),
2022-01-01 04:53:37 +00:00
p {
background_color: "black",
flex_direction: "column",
justify_content: "center",
align_items: "center",
2022-02-17 22:06:28 +00:00
color: "green",
2022-01-01 04:53:37 +00:00
"hi"
"hi"
"hi"
}
li {
background_color: "red",
flex_direction: "column",
justify_content: "center",
align_items: "center",
"bib"
"bib"
"bib"
"bib"
"bib"
"bib"
"bib"
"bib"
}
li {
background_color: "blue",
flex_direction: "column",
justify_content: "center",
align_items: "center",
"zib"
"zib"
"zib"
"zib"
"zib"
"zib"
}
p {
background_color: "yellow",
"asd"
}
p {
background_color: "green",
"asd"
}
p {
background_color: "white",
"asd"
}
p {
background_color: "cyan",
"asd"
}
2022-02-12 20:03:08 +00:00
div {
font_weight: "bold",
color: "#666666",
2022-02-17 22:06:28 +00:00
p {
2022-02-12 20:03:08 +00:00
"bold"
}
p {
font_weight: "normal",
" normal"
}
}
p {
font_style: "italic",
color: "red",
"italic"
}
p {
text_decoration: "underline",
2022-02-17 22:06:28 +00:00
color: "rgba(255, 255, 255)",
2022-02-12 20:03:08 +00:00
"underline"
}
p {
text_decoration: "line-through",
2022-02-17 22:06:28 +00:00
color: "hsla(10, 100%, 70%)",
2022-02-12 20:03:08 +00:00
"line-through"
}
2022-02-17 22:06:28 +00:00
div{
position: "absolute",
top: "1px",
background_color: "rgba(255, 0, 0, 50%)",
width: "100%",
p {
color: "rgba(255, 255, 255, {alpha}%)",
background_color: "rgba(100, 100, 100, {alpha}%)",
"rgba(255, 255, 255, {alpha}%)"
}
p {
color: "rgba(255, 255, 255, 100%)",
"rgba(255, 255, 255, 100%)"
}
}
2022-01-01 04:53:37 +00:00
}
})
}