A macro crate for writing HTML-like syntax for Yew application, highly inspired by Sycamore and Dioxus. It works by translating it into a corresponding yew::prelude::html!() macro.
- Basic Tags
- Types: built-in, component, generic, void (non-closing).
- Attributes: string literal, expression or code block binding.
- Content: tag children, string literal, or code block.
- Yew
- Fragment tag:
! { ... } - Dynamic tag names:
@{expr} ( ... ) { ... } - Conditional rendering:
if ... { ... } else { ... },if let ... { ... } else { ... }
- Fragment tag:
- Others
- List rendering:
iter().map( lmth! { ...} )..collect::<Html>()(forshorthand is not supported)
- List rendering:
lmth! syntax |
meaning | html! syntax |
|---|---|---|
! { ... } |
Yew's fragment | <> ... </> |
@{expr} { ... } |
Dynamicly named tag | <@{expr}> ... </@> |
tag (attrs) { ... } |
Tag with attributes and content | <tag attrs>{ ... }</tag> |
tag (attrs) |
Void tag with attributes | <tag attrs /> |
tag { ... } |
Tag with content | <tag>{ ... }</tag> |
tag |
Void tag with no attribute | <tag /> |
Attributes are separated by commas: tag (attr: val, attr: val, ...) { ... }
lmth! syntax |
meaning | html! syntax |
|---|---|---|
attr: expr |
Attribute with expression as value | attr={expr} |
attr: {code} |
Attribute with code block as value | attr={code} |
attr="litstr" |
Attribute with literal string as value | attr="litstr" |
attr |
Shorthand for {attr} in yew |
{attr} |
lmth! syntax |
meaning | html! syntax |
|---|---|---|
{code} |
Code as content | {code} |
"litstr" |
Literal string as content | "litstr" |
tag ... |
Tag | corresponding tag |
lmth! syntax |
meaning | html! syntax |
|---|---|---|
if {code} { ... } |
Conditional rendering | if {code} { ... } |
if let {code} { ... } |
Conditional rendering | if let {code} { ... } |
Please refer to GitHub repo's examples folder.
use yew_lmth::lmth;
lmth! {
div (class="container") {
h1 { "Hello, world!" }
button (onclick: handle_click()) { "Click me!" }
img (src="https://yew.rs/img/logo.svg")
}
}will expands to:
yew::prelude::html! {
<div class="container">
<h1>{ "Hello, world!" }</h1>
<button onclick={handle_click()}>{ "Click me!" }</button>
<img src="https://yew.rs/img/logo.svg" />
</div>
}