Skip to main content
Version: Next

Classes

Classes

The struct Classes can be used to deal with HTML classes.

When pushing a string to the set, Classes ensures that there is one element for every class even if a single string might contain multiple classes.

Classes can also be merged by using Extend (i.e. classes1.extend(classes2)) or push() (i.e. classes1.push(classes2)). Any type that implements Into<Classes> can be pushed onto an existing Classes.

The macro classes! is a convenient macro that creates one single Classes. Its input accepts a comma-separated list of expressions. The only requirement is that every expression implements Into<Classes>.

use yew::{classes, html};

html! {
<div class={classes!("container")}></div>
};

Components that accept classes

use yew::prelude::*;

#[derive(PartialEq, Properties)]
struct Props {
#[prop_or_default]
class: Classes,
fill: bool,
children: Html,
}

#[function_component]
fn MyComponent(props: &Props) -> Html {
let Props {
class,
fill,
children,
} = props;
html! {
<div
class={classes!(
"my-container-class",
fill.then(|| Some("my-fill-class")),
class.clone(),
)}
>
{ children.clone() }
</div>
}
}