diff --git a/docs/index.md b/docs/index.md index c1b7779..ec2b0f4 100644 --- a/docs/index.md +++ b/docs/index.md @@ -25,6 +25,7 @@ fn app() -> Element { ``` ## A slightly more advanced app (counter) +This app uses state management and a function using the state as a dependent ```rust title='src/main.rs' use osui::prelude::*; @@ -33,20 +34,16 @@ fn main() { } fn app() -> Element { + let count = State::new(0); + rsx! { - // Create a button with a on_click handler button { - on_click: fn(btn: &mut Button, _, document) { - let count = document.use_state::("count"); - *count += 1; - btn.children.set_text(&count.to_string()); + on_click: fn(_, _, _) @count { + count += 1; }, - "0" + "The current count is: {count}" } - - // Create a elemental field - @count: u32; } } ``` \ No newline at end of file diff --git a/docs/references/a_rsx.md b/docs/references/a_rsx.md index d3ae4e0..1be1cca 100644 --- a/docs/references/a_rsx.md +++ b/docs/references/a_rsx.md @@ -114,4 +114,20 @@ 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, + } + }) + + text { class: "title", static "Hello world!" } + } +} ``` \ No newline at end of file diff --git a/docs/references/b_handler.md b/docs/references/b_handler.md index 04f5706..0509890 100644 --- a/docs/references/b_handler.md +++ b/docs/references/b_handler.md @@ -22,21 +22,26 @@ rsx! { } ``` ### With dependents -If you have a `State` and want to use it in a `fn()`, you have to put a @ before the code block like this +If you have a `State` and want to use it in a `fn()`, Pub a @ before the code block like this ```rust -fn app() -> Element { - let count = State::new(); - +pub fn app() -> Element { + let count = State::new(0); rsx! { button { - on_click: fn(btn: &mut Button, event, document) @count { - let count = count.use_state(); // locks count so it can be used + on_click: fn(_, _, _) @count { + count += 1; }, - "Current count: {count}" + "The current count is: {count}" } } } ``` + +### How to call a handler +```rust +my_handler.clone().call(); +``` + > :::info you can add multiple decedents by separating them via `,` like: @var1, var2, var3 > :::info `fn() {}` is a part of the OSUI macro `rsx!`. In rust you would normally use `|| {}` \ No newline at end of file diff --git a/docs/references/f_element.md b/docs/references/f_element.md index f5ba4ae..8bdbc55 100644 --- a/docs/references/f_element.md +++ b/docs/references/f_element.md @@ -2,7 +2,9 @@ title: Element --- -`Element` is a type alias of `Box`. It makes the code look cleaner +A element is a very important part of a UI library, It's what makes it possible. + +`Element` is a type alias of `Box`. It makes the code look cleaner. # ElementWidget `ElementWidget` is a trait that defines the Elements and it's rendering / event updates. @@ -16,6 +18,10 @@ title: Element - **optional** - This function updates the element when there is a event +### `event(&mut self, document: &mut Document)` +- **optional** +- This function runs when the app first runs. It helps with element initialization after the `rsx!` stage. + # ElementCore `ElementCore` is a trait that will automatically be implemented by the `osui_element::element` proc-macro. All of it's functions are used by OSUI.