带类的 CSS！

Yew 本身不提供 CSS-in-Rust 解决方案，但通过提供以编程方式与 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 中扩展此概念。