HTML with html!
You can write expressions resembling HTML with the html!
macro. Behind the scenes, Yew turns
it into rust code representing the DOM to generate.
use yew::prelude::*;
let my_header: Html = html! {
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600" />
};
Similar to format expressions, there is an easy way to embed values from the surrounding context into the HTML by applying curly brackets:
use yew::prelude::*;
let header_text = "Hello world".to_string();
let header_html: Html = html! {
<h1>{header_text}</h1>
};
let count: usize = 5;
let counter_html: Html = html! {
<p>{"My age is: "}{count}</p>
};
let combined_html: Html = html! {
<div>{header_html}{counter_html}</div>
};
One major rule comes with the use of html!
- you can only return 1 wrapping node.
To render a list of multiple elements, html!
allows fragments. Fragments are tags
without a name, that produce no HTML element by themselves.
- Invalid
- Valid
use yew::html;
// error: only one root HTML element allowed
html! {
<div></div>
<p></p>
};