mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
20f76e78da
* Tidy up documentation. * Fix spelling (maybe) * Fix CI * Update docs/concepts/function-components.md Co-authored-by: Muhammad Hamza <muhammadhamza1311@gmail.com> * apply review Co-authored-by: teymour-aldridge <teymour.aldridge@icloud.com> Co-authored-by: Teymour Aldridge <42674621+teymour-aldridge@users.noreply.github.com>
1.5 KiB
1.5 KiB
| title |
|---|
| Lists |
Fragments
The html! macro always requires a single root node. In order to get around this restriction, you
can use an "empty tag" (these are also called "fragments").
use yew::html;
html! {
<>
<div></div>
<p></p>
</>
};
use yew::html;
/* error: only one root html element allowed */
html! {
<div></div>
<p></p>
};
Iterators
Yew supports two different syntaxes for building HTML from an iterator.
The first is to call collect::<Html>() on the final transform in your iterator, which returns a
list that Yew can display.
use yew::{html, Html};
let items = (1..=10).collect::<Vec<_>>();
html! {
<ul class="item-list">
{ items.iter().collect::<Html>() }
</ul>
};
The alternative is to use the for keyword, which is not native Rust syntax and instead is used by
the HTML macro to output the needed code to display the iterator.
use yew::{html};
let items = (1..=10).collect::<Vec<_>>();
html! {
<ul class="item-list">
{ for items.iter() }
</ul>
};