クラスに 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 で説明します。