diff --git a/meta/src/html.rs b/meta/src/html.rs index fb58d0033..647a29ea4 100644 --- a/meta/src/html.rs +++ b/meta/src/html.rs @@ -8,18 +8,37 @@ use std::{cell::RefCell, rc::Rc}; pub struct HtmlContext { lang: Rc>>, dir: Rc>>, + class: Rc>>, } impl HtmlContext { /// Converts the `` metadata into an HTML string. pub fn as_string(&self) -> Option { - match (self.lang.borrow().as_ref(), self.dir.borrow().as_ref()) { - (None, None) => None, - (Some(lang), None) => Some(format!(" lang=\"{}\"", lang.get())), - (None, Some(dir)) => Some(format!(" dir=\"{}\"", dir.get())), - (Some(lang), Some(dir)) => { - Some(format!(" lang=\"{}\" dir=\"{}\"", lang.get(), dir.get())) - } + let lang = self + .lang + .borrow() + .as_ref() + .map(|val| format!("lang=\"{}\"", val.get())); + let dir = self + .dir + .borrow() + .as_ref() + .map(|val| format!("dir=\"{}\"", val.get())); + let class = self + .class + .borrow() + .as_ref() + .map(|val| format!("class=\"{}\"", val.get())); + let mut val = [lang, dir, class] + .into_iter() + .flatten() + .collect::>() + .join(" "); + if val.is_empty() { + None + } else { + val.insert(0, ' '); + Some(val) } } } @@ -57,6 +76,9 @@ pub fn Html( /// The `dir` attribute on the ``. #[prop(optional, into)] dir: Option, + /// The `class` attribute on the ``. + #[prop(optional, into)] + class: Option, ) -> impl IntoView { cfg_if! { if #[cfg(any(feature = "csr", feature = "hydrate"))] { @@ -71,15 +93,24 @@ pub fn Html( } if let Some(dir) = dir { + let el = el.clone(); create_render_effect(cx, move |_| { let value = dir.get(); _ = el.set_attribute("dir", &value); }); } + + if let Some(class) = class { + create_render_effect(cx, move |_| { + let value = class.get(); + _ = el.set_attribute("class", &value); + }); + } } else { let meta = crate::use_head(cx); *meta.html.lang.borrow_mut() = lang; *meta.html.dir.borrow_mut() = dir; + *meta.html.class.borrow_mut() = class; } } }