Skip to main content
Version: Next

Lists

Fragments#

The html! macro always requires a single root node. In order to get around this restriction, it's valid to wrap content in empty tags:

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:

use yew::{html, Html};
let items = (1..=10).collect::<Vec<_>>();
html! {    <ul class="item-list">        { items.iter().collect::<Html>() }    </ul>};
use yew::{html};
let items = (1..=10).collect::<Vec<_>>();
html! {    <ul class="item-list">        { for items.iter() }    </ul>};

Relevant examples#