some updates

This commit is contained in:
2024-11-30 06:38:16 +01:00
parent 8557316ad1
commit aee87fcc0c
21 changed files with 1248 additions and 13 deletions
@@ -0,0 +1,66 @@
---
title: CSS
---
Along with the `Css` type, This macro provides styling for multiple elements by their class name or struct name.
## Style by classname
```rust
fn app() -> Element {
rsx! {
styling: Some(styles()) // Set the css styling for the div.
button { class: "my_btn", "Click me!" }
}
}
fn styles() -> Css {
css! {
.my_btn { // style by classname
color: Red,
}
}
}
```
## Style by state
```rust
fn app() -> Element {
rsx! {
styling: Some(styles()) // Set the css styling for the div.
button { class: "my_btn", "Click me!" }
}
}
fn styles() -> Css {
css! {
.my_btn: clicked { // When the element state is clicked
color: Blue,
}
}
}
```
## Style by struct name
```rust
fn app() -> Element {
rsx! {
styling: Some(styles()) // Set the css styling for the div.
button { "Click me!" } // No need for classes
}
}
fn styles() -> Css {
css! {
Button { // style by the struct name
color: Red,
}
Button: clicked { // When the element state is clicked
color: Blue,
}
}
}
```