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 に関する内容はこちらのドキュメントをご覧ください。