クラス

クラス

Classes 構造体は、HTML クラスを処理するために使用できます。

文字列をコレクションにプッシュすると、Classes は各クラスが一つの要素を持つことを保証します。単一の文字列が複数のクラスを含む場合でも同様です。

Classes は、Extend（例：classes1.extend(classes2)）や push()（例：classes1.push(classes2)）を使用してマージすることもできます。Into<Classes> を実装している任意の型を既存の Classes にプッシュすることができます。

classes! は、単一の Classes を作成するための便利なマクロです。その入力はカンマで区切られた式のリストを受け入れます。唯一の要件は、各式が Into<Classes> を実装していることです。

Literal

use yew::{classes, html};

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

Multiple

use yew::{classes, html};

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

String

use yew::{classes, html};

let my_classes = String::from("class-1 class-2");

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

Optional

use yew::{classes, html};

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

Vector

use yew::{classes, html};

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

Array

use yew::{classes, html};

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

クラスを受け入れるコンポーネント

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