updated
This commit is contained in:
@@ -101,3 +101,17 @@ fn app() -> Element {
|
||||
}
|
||||
```
|
||||
> :::info you can add multiple decedents by separating them via `,` like: @var1, var2, var3
|
||||
|
||||
## 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
|
||||
|
||||
rsx! {
|
||||
text {
|
||||
static "Current count: {count}"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -22,7 +22,7 @@ rsx! {
|
||||
}
|
||||
```
|
||||
### With dependents
|
||||
If you have a `State<T>` and want to use it, you have to put a @ before the code block like this
|
||||
If you have a `State<T>` and want to use it in a `fn()`, you have to put a @ before the code block like this
|
||||
```rust
|
||||
fn app() -> Element {
|
||||
let count = State::new();
|
||||
|
||||
+5
-17
@@ -2,15 +2,13 @@
|
||||
title: CSS
|
||||
---
|
||||
|
||||
Along with the `Css` type, This macro provides styling for multiple elements by their class name or struct name.
|
||||
Along with the `Css` type, This macro provides styling for multiple elements by their class name.
|
||||
|
||||
## Example
|
||||
In this case we will make a button with the classname `my_btn`. And set `styling`
|
||||
```rust
|
||||
fn app() -> Element {
|
||||
rsx! {
|
||||
styling: Some(styles()) // Set the css styling for the div.
|
||||
|
||||
button { class: "my_btn", "Click me!" }
|
||||
}
|
||||
}
|
||||
@@ -25,7 +23,6 @@ fn styles() -> Css {
|
||||
}
|
||||
|
||||
// Style by state
|
||||
|
||||
"my_btn": "clicked" { // When the element state is clicked
|
||||
color: Blue,
|
||||
}
|
||||
@@ -33,19 +30,10 @@ fn styles() -> Css {
|
||||
}
|
||||
```
|
||||
|
||||
## Style by struct name
|
||||
## `hover`
|
||||
The `hover` state is on every element but only if it's focused/hovered.
|
||||
```rust
|
||||
fn styles() -> Css {
|
||||
css! {
|
||||
Button { // style by the struct name
|
||||
color: Red,
|
||||
}
|
||||
|
||||
// Style by state
|
||||
|
||||
Button: clicked { // When the element state is clicked
|
||||
color: Blue,
|
||||
}
|
||||
}
|
||||
"my_btn": "clicked" {
|
||||
color: Green,
|
||||
}
|
||||
```
|
||||
@@ -9,7 +9,7 @@ rsx! {
|
||||
button {
|
||||
style: style! {
|
||||
color: Red,
|
||||
clicked { // when the button state is 'clicked'
|
||||
"clicked" { // when the button state is 'clicked'
|
||||
color: Blue,
|
||||
}
|
||||
},
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Writer
|
||||
---
|
||||
|
||||
The `Writer` is what makes OSUI efficient and it's magic. `Writer` is used on the `Element::render` function. It get's access to the `Style` and gets a absolute position and ansi coloring, Then it prints and adjusts to what is being written.
|
||||
|
||||
## Functions
|
||||
### `write(&mut self, s: &str)`
|
||||
This function simply writes s to the screen depending on the absolute positioning.
|
||||
### `new_frame(&mut self) -> Frame`
|
||||
This function creates a frame depending on the values. Use this you need to render elements.
|
||||
Reference in New Issue
Block a user