浏览代码

update documentation to refect tui changes

Evan Almloff 3 年之前
父节点
当前提交
159be32fd4
共有 1 个文件被更改,包括 41 次插入8 次删除
  1. 41 8
      docs/reference/src/platforms/tui.md

+ 41 - 8
docs/reference/src/platforms/tui.md

@@ -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