mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-10 14:44:12 +00:00
update documentation to refect tui changes
This commit is contained in:
parent
91b2147552
commit
159be32fd4
1 changed files with 41 additions and 8 deletions
|
@ -9,13 +9,12 @@ TUI support is currently quite experimental. Even the project name will change.
|
|||
## Getting Set up
|
||||
|
||||
|
||||
To tinker with TUI support, start by making a new package and adding our TUI package from git.
|
||||
To tinker with TUI support, start by making a new package and adding our TUI feature.
|
||||
|
||||
```shell
|
||||
$ cargo new --bin demo
|
||||
$ cd demo
|
||||
$ cargo add dioxus
|
||||
$ cargo add rink --git https://github.com/DioxusLabs/rink.git
|
||||
$ cargo add dioxus --features tui
|
||||
```
|
||||
|
||||
|
||||
|
@ -27,10 +26,7 @@ Then, edit your `main.rs` with the basic template.
|
|||
use dioxus::prelude::*;
|
||||
|
||||
fn main() {
|
||||
let mut dom = VirtualDom::new(app);
|
||||
dom.rebuild();
|
||||
|
||||
rink::render_vdom(&mut dom).unwrap();
|
||||
dioxus::tui::launch(app);
|
||||
}
|
||||
|
||||
fn app(cx: Scope) -> Element {
|
||||
|
@ -54,7 +50,44 @@ To run our app:
|
|||
$ cargo run
|
||||
```
|
||||
|
||||
Press "q" to close the app (yes, this is hardcoded, we are working on handlers to expose this in your code.)
|
||||
Press "ctrl-c" to close the app. To switch from "ctrl-c" to just "q" to quit you can launch the app with a configuration to disable the default quit and use the root TuiContext to quit on your own.
|
||||
|
||||
```rust
|
||||
// main
|
||||
use dioxus::events::{KeyCode, KeyboardEvent};
|
||||
use dioxus::prelude::*;
|
||||
use dioxus::tui::TuiContext;
|
||||
|
||||
fn main() {
|
||||
dioxus::tui::launch_cfg(
|
||||
app,
|
||||
dioxus::tui::Config {
|
||||
ctrl_c_quit: false,
|
||||
// Some older terminals only support 16 colors or ANSI colors if your terminal is one of these change this to BaseColors or ANSI
|
||||
rendering_mode: dioxus::tui::RenderingMode::Rgb,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
fn app(cx: Scope) -> Element {
|
||||
let tui_ctx: TuiContext = cx.consume_context().unwrap();
|
||||
|
||||
cx.render(rsx! {
|
||||
div {
|
||||
width: "100%",
|
||||
height: "10px",
|
||||
background_color: "red",
|
||||
justify_content: "center",
|
||||
align_items: "center",
|
||||
onkeydown: move |k: KeyboardEvent| if let KeyCode::Q = k.data.key_code {
|
||||
tui_ctx.quit();
|
||||
},
|
||||
|
||||
"Hello world!"
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
## Notes
|
||||
|
||||
|
|
Loading…
Reference in a new issue