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

  • 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. html! {
4. <div class={classes!(["class-1", "class-2"])}></div>
5. };

Components that accept classes

1. use yew::prelude::*;

3. #[derive(PartialEq, Properties)]
4. struct Props {
5. #[prop_or_default]
6. class: Classes,
7. fill: bool,
8. children: Html,
9. }

11. #[function_component]
12. fn MyComponent(props: &Props) -> Html {
13. let Props {
14. class,
15. fill,
16. children,
17. } = props;
18. html! {
19. <div
20. class={classes!(
21. "my-container-class",
22. fill.then(|| Some("my-fill-class")),
23. class.clone(),
24. )}
25. >
26. { children.clone() }
27. </div>
28. }
29. }