使用類別的 CSS

Yew 本身不提供 Rust 中的 CSS 解決方案，但可以透過提供與 HTML class 屬性互動的程式化方法來協助樣式設定。

類別

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

文字

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

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

我們將會在 進階 CSS 中擴充這個概念。

內嵌樣式

目前 Yew 不提供任何針對透過 styles 屬性指定之內嵌樣式提供特別的協助，但你可以像使用其他 HTML 屬性一樣使用它

use yew::{classes, html};

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

我們將會在 進階 CSS 中擴充這個概念。