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>
};

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};

html! {
  <div class={classes!(["class-1", "class-2"])}></div>
};

Components that accept classes#

use yew::prelude::*;

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

#[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>
    }
}