Jonathan Kelley
cd54f5953b
* update the dioxus cratesio readme * fix example * fix header * add a bunch more examples
45 lines
1.3 KiB
Rust
45 lines
1.3 KiB
Rust
//! Inline styles.
|
|
//!
|
|
//! For quick one-off styling, every CSS property is available as an attribute on HTML
|
|
//! elements — use snake_case in Rust (`background_color`) for the kebab-case CSS property
|
|
//! (`background-color`). You can also set the raw `style:` attribute with a full string.
|
|
|
|
use dioxus::prelude::*;
|
|
|
|
fn main() {
|
|
dioxus::launch(app);
|
|
}
|
|
|
|
fn app() -> Element {
|
|
rsx! {
|
|
// Each CSS property is just a named attribute
|
|
div {
|
|
background_color: "#1e3a8a",
|
|
color: "white",
|
|
padding: "20px",
|
|
border_radius: "8px",
|
|
font_family: "system-ui, sans-serif",
|
|
|
|
h1 { "Inline styling" }
|
|
p { "Property names are snake_case here, kebab-case in real CSS." }
|
|
}
|
|
|
|
// The raw `style` attribute accepts any CSS string
|
|
div {
|
|
style: "margin-top: 12px; border: 2px dashed tomato; padding: 10px;",
|
|
"Use `style:` when you want a plain CSS string."
|
|
}
|
|
|
|
// Interpolation works too — great for values driven by Rust expressions
|
|
for i in 1..=5 {
|
|
span {
|
|
display: "inline-block",
|
|
width: "32px",
|
|
height: "32px",
|
|
margin: "4px",
|
|
background_color: "hsl({i * 60}, 70%, 55%)",
|
|
}
|
|
}
|
|
}
|
|
}
|