クラス

クラス

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

文字列をセットにプッシュすると、1 つの文字列に複数のクラスが含まれる場合でも、クラス は各クラスに 1 つの要素があることを保証します。

クラス は Extend (つまり、classes1.extend(classes2)) または push() (つまり、classes1.push(classes2)) を使用してマージすることもできます。Into<Classes> を実装する任意の型は、既存の クラス にプッシュできます。

マクロ classes! は、単一の クラス を作成する便利なマクロです。その入力は、カンマ区切りの式のリストを受け入れます。唯一の要件は、すべての式が 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>
};

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

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