mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
ed2e1ea00e
* Add doc-test to test website code snippets Heavily inspired by tokio-rs/website repo. * Fix code snippets to pass doc tests Some code snippets are explicitly ignored and some are not run to avoid having to include dependencies for one liners. * Add website code snippet tests to CI * Fix CI * Remove doc-test from workspace * Exclude doc-test from workspace * Refactor code snippets and tests Code snippets can import types from doc_test crate i.e.: ```rust use doc_test::agents::EventBus; ``` This allows for moving some boilerplate away from the example and still checks that the code compiles correctly. Also some slight changes to some of the examples and the information about `ComponentLink` which is deprecated. * Move doc-test to packages * Rename doc-test crate to website-test The new name makes it more clear the purpose of this crate. * fix ci
1.3 KiB
1.3 KiB
| title |
|---|
| Literals and Expressions |
Literals
If expressions resolve to types that implement Display, they will be converted to strings and inserted into the DOM as a Text node.
All display text must be enclosed by {} blocks because text is handled as an expression. This is
the largest deviation from normal HTML syntax that Yew makes.
use yew::html;
let text = "lorem ipsum";
html!{
<>
<div>{text}</div>
<div>{"dolor sit"}</div>
<span>{42}</span>
</>
};
Expressions
You can insert expressions in your HTML using {} blocks, as long as they resolve to Html
use yew::html;
let show_link = true;
html! {
<div>
{
if show_link {
html! {
<a href="https://example.com">{"Link"}</a>
}
} else {
html! {}
}
}
</div>
};
It often makes sense to extract these expressions into functions or closures to optimize for readability:
use yew::{html, Html};
let show_link = true;
let maybe_display_link = move || -> Html {
if show_link {
html! {
<a href="https://example.com">{"Link"}</a>
}
} else {
html! {}
}
};
html! {
<div>{maybe_display_link()}</div>
};