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)). 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>.

  • Literal
  • Multiple
  • String
  • Optional
  • Vector
  • Array
  1. use yew::{classes, html};
  3. html! {
  4.     <div class={classes!("container")}></div>
  5. };
  1. use yew::{classes, html};
  3. html! {
  4.   <div class={classes!("class-1", "class-2")}></div>
  5. };
  1. use yew::{classes, html};
  3. let my_classes = String::from("class-1 class-2");
  5. html! {
  6.   <div class={classes!(my_classes)}></div>
  7. };
  1. use yew::{classes, html};
  3. html! {
  4.   <div class={classes!(Some("class"))} />
  5. };
  1. use yew::{classes, html};
  3. html! {
  4.   <div class={classes!(vec!["class-1", "class-2"])}></div>
  5. };
  1. use yew::{classes, html};
  3. let my_classes = ["class-1", "class-2"];
  5. html! {
  6.   <div class={classes!(my_classes.as_ref())}></div>
  7. };

Components that accept classes

  1. use boolinator::Boolinator;
  2. use yew::{classes, html, Children, Classes, Component, Html, Properties};
  4. #[derive(Clone, Properties)]
  5. struct Props {
  6.     #[prop_or_default]
  7.     class: Classes,
  8.     fill: bool,
  9.     children: Children,
  10. }
  12. struct MyComponent {
  13.     props: Props,
  14. }
  16. impl Component for MyComponent {
  17.     type Properties = Props;
  19.     // ...
  21.     fn view(&self) -> Html {
  22.         let Props {
  23.             class,
  24.             fill,
  25.             children,
  26.         } = &self.props;
  27.         html! {
  28.             <div
  29.                 class=classes!(
  30.                     "my-container-class",
  31.                     fill.as_some("my-fill-class"),
  32.                     class.clone(),
  33.                 )
  34.             >
  35.                 { children.clone() }
  36.             </div>
  37.         }
  38.     }
  39. }

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