類別

類別

結構 Classes 可用於處理 HTML 類別。

當將字串推送到集合時，Classes 可確保每個類別有一個元素，即使單一字串可能包含多個類別。

可以使用 Extend (即 classes1.extend(classes2)) 或 push() (即 classes1.push(classes2)) 來合併 Classes。任何實作 Into<Classes> 的類型都可以推送到現有的 Classes。

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