diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 0000000..984e75f --- /dev/null +++ b/docs/index.md @@ -0,0 +1,48 @@ +--- +title: Introduction +slug: / +--- + +On a cargo project run +```bash +cargo add osui +``` + +## Simple app +```rust title='src/main.rs' +use osui::prelude::*; + +fn main() { + launch!(app()); +} + +fn app() -> Element { + rsx! { + text { "Hello, World!" } + } +} +``` + +## A slightly more advanced app (counter) +```rust title='src/main.rs' +use osui::prelude::*; + +fn main() { + launch!(app()); +} + +fn app() -> Element { + rsx! { + // Create a button with a on_click handler + button { on_click: Handler::new(move |btn: &mut Button, _, document| { + if let Some(count) = document.get_element_by_id::>("count") { + count.data += 1; + btn.children.set_text(&count.data.to_string()); + } + }), "0" } + + // Store the data (in this case count) + data_holder as u32 { id: "count" } + } +} +``` \ No newline at end of file diff --git a/docs/references/css.md b/docs/references/css.md new file mode 100644 index 0000000..9df9a7e --- /dev/null +++ b/docs/references/css.md @@ -0,0 +1,5 @@ +--- +title: CSS +--- + + \ No newline at end of file diff --git a/docs/references/rsx.md b/docs/references/rsx.md new file mode 100644 index 0000000..7b8500c --- /dev/null +++ b/docs/references/rsx.md @@ -0,0 +1,82 @@ +--- +title: RSX +--- + +This macro is the recommended way to describe a ui, it is a div that holds multiple elements +```rust +fn app() -> Element { + rsx! { + button { "click me" } + text { "This is some text" } + } +} +``` + +> :::info `rsx!` is really just a div, so you can just do something like +> ```rust +> rsx! { +> id: "root", class: "root", +> +> button { "click me" } +> text { "This is some text" } +> } +> ``` + +## 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!" } + } + } +} +``` + +## Formatted text +```rust +fn app() -> Element { + let x = 69; + rsx! { + text { "the number is {x}, Nice!" } + } +} +``` +> :::info You can also do expressions after the string +```rust +text { "the number is {}, Nice!", x } +``` + +## For loops +```rust +fn app() -> Element { + rsx! { + for (i in 0..5) { // () are required + text { "{i}" } + } + } +} +``` + +## 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" } + } +} +``` + +## Type assignment +In special elements like `data_holder` You can specify what `type` the element holds. It would act like `my_fn::()` +```rust +fn app() -> Element { + rsx! { + // assign the type u32 + data_holder as u32 { id: "count" } + } +} +``` \ No newline at end of file diff --git a/versioned_docs/version-0.0.7/index.md b/versioned_docs/version-0.0.7/index.md new file mode 100644 index 0000000..984e75f --- /dev/null +++ b/versioned_docs/version-0.0.7/index.md @@ -0,0 +1,48 @@ +--- +title: Introduction +slug: / +--- + +On a cargo project run +```bash +cargo add osui +``` + +## Simple app +```rust title='src/main.rs' +use osui::prelude::*; + +fn main() { + launch!(app()); +} + +fn app() -> Element { + rsx! { + text { "Hello, World!" } + } +} +``` + +## A slightly more advanced app (counter) +```rust title='src/main.rs' +use osui::prelude::*; + +fn main() { + launch!(app()); +} + +fn app() -> Element { + rsx! { + // Create a button with a on_click handler + button { on_click: Handler::new(move |btn: &mut Button, _, document| { + if let Some(count) = document.get_element_by_id::>("count") { + count.data += 1; + btn.children.set_text(&count.data.to_string()); + } + }), "0" } + + // Store the data (in this case count) + data_holder as u32 { id: "count" } + } +} +``` \ No newline at end of file diff --git a/versioned_docs/version-0.0.7/references/rsx.md b/versioned_docs/version-0.0.7/references/rsx.md new file mode 100644 index 0000000..7b8500c --- /dev/null +++ b/versioned_docs/version-0.0.7/references/rsx.md @@ -0,0 +1,82 @@ +--- +title: RSX +--- + +This macro is the recommended way to describe a ui, it is a div that holds multiple elements +```rust +fn app() -> Element { + rsx! { + button { "click me" } + text { "This is some text" } + } +} +``` + +> :::info `rsx!` is really just a div, so you can just do something like +> ```rust +> rsx! { +> id: "root", class: "root", +> +> button { "click me" } +> text { "This is some text" } +> } +> ``` + +## 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!" } + } + } +} +``` + +## Formatted text +```rust +fn app() -> Element { + let x = 69; + rsx! { + text { "the number is {x}, Nice!" } + } +} +``` +> :::info You can also do expressions after the string +```rust +text { "the number is {}, Nice!", x } +``` + +## For loops +```rust +fn app() -> Element { + rsx! { + for (i in 0..5) { // () are required + text { "{i}" } + } + } +} +``` + +## 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" } + } +} +``` + +## Type assignment +In special elements like `data_holder` You can specify what `type` the element holds. It would act like `my_fn::()` +```rust +fn app() -> Element { + rsx! { + // assign the type u32 + data_holder as u32 { id: "count" } + } +} +``` \ No newline at end of file