Skip to main content
Version: 0.18.0



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)). In fact, anything that implements Into<Classes> can be used to push new classes to the set.

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>}
use yew::{classes, html};
html! {  <div class=classes!("class-1", "class-2")></div>}
use yew::{classes, html};
let my_classes = String::from("class-1 class-2");
html! {  <div class=classes!(my_classes)></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};
let my_classes = ["class-1", "class-2"];
html! {  <div class=classes!(&my_classes)></div>}

Components that accept classes#

use boolinator::Boolinator;use yew::{classes, html, Children, Classes, Component, Html, Properties};
#[derive(Clone, Properties)]struct Props {    #[prop_or_default]    class: Classes,    fill: bool,    children: Children,}
struct MyComponent {    props: Props,}
impl Component for MyComponent {    type Properties = Props;
    // ...
    fn view(&self) -> Html {        let Props {            class,            fill,            children,        } = &self.props;        html! {            <div                class=classes!(                    "my-container-class",                    fill.as_some("my-fill-class"),                    class.clone(),                )            >                { children.clone() }            </div>        }    }}

The example makes use of the boolinator crate to conditionally add the "my-fill-class" class based on the fill boolean attribute.