From 60fb444bc17c4481056d638a85afbdd5d601ce00 Mon Sep 17 00:00:00 2001 From: Leo dev Date: Tue, 24 Dec 2024 14:40:48 +0100 Subject: [PATCH] Updated the docs --- docs/index.md | 10 ++-- docs/references/a_rsx.md | 100 +++++++++++++++++------------------ docs/references/b_handler.md | 3 +- docs/references/css.md | 34 ++++++------ 4 files changed, 73 insertions(+), 74 deletions(-) diff --git a/docs/index.md b/docs/index.md index ec2b0f4..b88e2d6 100644 --- a/docs/index.md +++ b/docs/index.md @@ -14,10 +14,11 @@ cargo add osui use osui::prelude::*; fn main() { - launch!(app()); + launch!(App); } -fn app() -> Element { +#[component] +fn App() -> Element { rsx! { text { "Hello, World!" } } @@ -30,10 +31,11 @@ This app uses state management and a function using the state as a dependent use osui::prelude::*; fn main() { - launch!(app()); + launch!(App); } -fn app() -> Element { +#[component] +fn App() -> Element { let count = State::new(0); rsx! { diff --git a/docs/references/a_rsx.md b/docs/references/a_rsx.md index 1be1cca..b3a1b19 100644 --- a/docs/references/a_rsx.md +++ b/docs/references/a_rsx.md @@ -4,7 +4,8 @@ title: RSX This macro is the recommended way to describe a ui, it is a div that holds multiple elements ```rust -fn app() -> Element { +#[component] +fn App() -> Element { rsx! { button { "click me" } text { "This is some text" } @@ -25,23 +26,21 @@ fn app() -> Element { ## Child values If you want to add more children to values then just simply express it like a `rsx!` ```rust -fn app() -> Element { - let x = 69; - rsx! { - div { - text { "the number is {x}, Nice!" } - } +let x = 69; + +rsx! { + div { + text { "the number is {x}, Nice!" } } } ``` ## Formatted text ```rust -fn app() -> Element { - let x = 69; - rsx! { - text { "the number is {x}, Nice!" } - } +let x = 69; + +rsx! { + text { "the number is {x}, Nice!" } } ``` > :::info You can also do expressions after the string @@ -51,11 +50,9 @@ text { "the number is {}, Nice!", x } ## For loops ```rust -fn app() -> Element { - rsx! { - for (i in 0..5) { // () are required - text { "{i}" } - } +rsx! { + for (i in 0..5) { // () are required + text { "{i}" } } } ``` @@ -63,22 +60,18 @@ fn app() -> Element { ## Attribute You can change the element's struct fields by just providing some attributes before the children ```rust -fn app() -> Element { - rsx! { - text { class: "my_text" } - } +rsx! { + text { class: "my_text" } } ``` ## Handler functions Instead of closures which are tricky to work with on structs, We use `Handler`, It's basically a closure wrapped with a `Arc>` ```rust -fn app() -> Element { - rsx! { - button { - on_click: fn(btn: &mut Button, event, document) { - // do something - } +rsx! { + button { + on_click: fn(btn: &mut Button, event, document) { + // do something } } } @@ -87,16 +80,14 @@ fn app() -> Element { ## Handler functions (with dependents) If you have a `State` and want to use it, you have to put a @ before the code block like this ```rust -fn app() -> Element { - let count = State::new(); +let count = State::new(); - rsx! { - button { - on_click: fn(btn: &mut Button, event, document) @count { - let count = count.use_state(); // locks count so it can be used - }, - "Current count: {count}" - } +rsx! { + button { + on_click: fn(btn: &mut Button, event, document) @count { + let count = count.use_state(); // locks count so it can be used + }, + "Current count: {count}" } } ``` @@ -105,13 +96,11 @@ fn app() -> Element { ## Static text If your text doesn't use variables that will change you can put `static` right before the text to signal that it's static. ```rust -fn app() -> Element { - let count = 69; // count won't change since it's not mutable +let count = 69; // count won't change since it's not mutable - rsx! { - text { - static "Current count: {count}" - } +rsx! { + text { + static "Current count: {count}" } } ``` @@ -119,15 +108,22 @@ fn app() -> Element { ## Instructions Add an instruction by putting a `@` before it, like this: ```rust -pub fn app() -> Element { - rsx! { - @SetStyle(css! { // the SetStyle instruction - "title": { - color: Green, - } - }) +rsx! { + @SetStyle(css! { // the SetStyle instruction + "title": { + color: Green, + } + }) - text { class: "title", static "Hello world!" } - } + text { class: "title", static "Hello world!" } } -``` \ No newline at end of file +``` + +# Ghost elements +With a `div` you can use tab (or shift+tab) to go through components, But sometimes an element doesn't really do anything, So to skip over the element you can use the ghost syntax `%`. This makes it so that the element is not selectable. +```rust +rsx! { + %text { "This is a ghost title!!!!" } + + button { "Click me!" } +} \ No newline at end of file diff --git a/docs/references/b_handler.md b/docs/references/b_handler.md index 0509890..3b513d6 100644 --- a/docs/references/b_handler.md +++ b/docs/references/b_handler.md @@ -24,7 +24,8 @@ rsx! { ### With dependents If you have a `State` and want to use it in a `fn()`, Pub a @ before the code block like this ```rust -pub fn app() -> Element { +#[component] +pub fn App() -> Element { let count = State::new(0); rsx! { button { diff --git a/docs/references/css.md b/docs/references/css.md index f14d86f..11d8de5 100644 --- a/docs/references/css.md +++ b/docs/references/css.md @@ -7,25 +7,25 @@ Along with the `Css` type, This macro provides styling for multiple elements by ## Example In this case we will make a button with the classname `my_btn`. And set `styling` ```rust -fn app() -> Element { +#[component] +fn App() -> Element { rsx! { - button { class: "my_btn", "Click me!" } - } -} -``` + @SetStyle(css! { + blue-outline { + outline: true, + outline_color: Blue, + } -## Style by classname -```rust -fn styles() -> Css { - css! { - "my_btn" { // style by classname - color: Red, - } + red { + color: Red, + } - // Style by state - "my_btn": "clicked" { // When the element state is clicked - color: Blue, - } + green-hover: "hover" { + color: Green, + } + }) + + button { class: "red blue-outline green-hover", "Click me!" } } } ``` @@ -33,7 +33,7 @@ fn styles() -> Css { ## `hover` The `hover` state is on every element but only if it's focused/hovered. ```rust -"my_btn": "clicked" { +"my_btn": "hover" { color: Green, } ``` \ No newline at end of file