使用 classes! 巨集處理 CSS 類別

Yew 並沒有提供原生的 CSS-in-Rust 解決方案，但透過提供程式設計方式與 HTML class 屬性互動的方式來輔助樣式。

classes! 巨集

classes! 巨集和相關的 Classes 結構簡化了 HTML 類別的使用：

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

html! {
  <div class={classes!(String::from("class-1 class-2"))}></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>
};

Slice

use yew::{classes, html};

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

更多 CSS 相關的內容請參考此文檔。

內聯樣式

目前 Yew 並沒有提供特殊的輔助工具來處理透過 style 屬性指定的內聯樣式，但你可以像處理其他 HTML 屬性一樣處理它：

use yew::{classes, html};

html! {
  <div style="color: red;"></div>
};

更多 CSS 相關的內容請參考此文檔。