CSS with classes!
Yew does not natively provide a css in rust solution, but helps with styling by providing
programmatic ways to interact with the html class
attribute.
Classes
The classes!
macro and associated Classes
struct simplify the use of HTML classes:
- Literal
- Multiple
- String
- Optional
- Vector
- Slice
use yew::{classes, html};
html! {
<div class={classes!("container")}></div>
};
use yew::{classes, html};
html! {
<div class={classes!("class-1", "class-2")}></div>
};
use yew::{classes, html};
html! {
<div class={classes!(String::from("class-1 class-2"))}></div>
};
use yew::{classes, html};
html! {
<div class={classes!(Some("class"))} />
};
use yew::{classes, html};
html! {
<div class={classes!(vec!["class-1", "class-2"])}></div>
};
use yew::{classes, html};
html! {
<div class={classes!(["class-1", "class-2"].as_ref())}></div>
};
We will expand upon this concept in more CSS.
Inline Styles
Currently Yew does not provide any special help with inline styles specified via the styles
attribute,
but you can use it like any other html attribute:
use yew::{classes, html};
html! {
<div style="color: red;"></div>
};
We will expand upon this concept in more CSS.