4个版本
| 0.1.0 | 2024年1月28日 |
|---|---|
| 0.1.0-alpha | 2024年1月26日 |
| 0.0.1 | 2024年1月24日 |
| 0.0.0 | 2024年1月24日 |
#355 in 过程宏
55 每月下载量
38KB
909 行
Yew LMTH
一个用于编写类似HTML语法的Yew应用程序的宏crate，深受Sycamore和Dioxus的启发。它通过将其转换为相应的 yew::prelude::html!() 宏来实现。
功能
- 基本标签
- 类型：内置、组件、泛型、空（非闭合）。
- 属性：字符串字面量、表达式或代码块绑定。
- 内容：标签子元素、字符串字面量或代码块。
- Yew
- 其他
- 列表渲染：
iter().map( lmth! { ...} )..collect::<Html>()（不支持for简写）
- 列表渲染：
语法
标签
lmth! 语法 |
含义 | html! 语法 |
|---|---|---|
! { ... } |
Yew 的片段 | <> ... </> |
@{表达式} { ... } |
动态命名的标签 | <@{表达式}> ... </@> |
标签(属性) { ... } |
带属性和内容的标签 | <标签属性>{ ... }</标签> |
标签(属性) |
带属性的空标签 | <标签属性/> |
标签{ ... } |
带内容的标签 | <标签>{ ... }</标签> |
标签 |
不带属性的空标签 | <标签/> |
属性
属性通过逗号分隔：tag (attr: val, attr: val, ...) { ... }
lmth! 语法 |
含义 | html! 语法 |
|---|---|---|
attr:表达式 |
具有表达式值的属性 | attr={表达式} |
attr: {代码} |
具有代码块值的属性 | attr={代码} |
attr="litstr" |
具有文本字符串值的属性 | attr="litstr" |
attr |
yew 中 {attr} 的缩写 |
{attr} |
内容
lmth! 语法 |
含义 | html! 语法 |
|---|---|---|
{代码} |
作为内容的代码 | {代码} |
"litstr" |
作为内容的文本字符串 | "litstr" |
标签... |
标签 | 对应标签 |
条件渲染
lmth! 语法 |
含义 | html! 语法 |
|---|---|---|
if {代码} { ... } |
条件渲染 | if {代码} { ... } |
if let {代码} { ... } |
条件渲染 | if let {代码} { ... } |
示例
请参阅 GitHub 仓库的示例文件夹。
use yew_lmth::lmth;
lmth! {
div (class="container") {
h1 { "Hello, world!" }
button (onclick: handle_click()) { "Click me!" }
img (src="https://yew.rust-lang.net.cn/img/logo.svg")
}
}
将展开为
yew::prelude::html! {
<div class="container">
<h1>{ "Hello, world!" }</h1>
<button onclick={handle_click()}>{ "Click me!" }</button>
<img src="https://yew.rust-lang.net.cn/img/logo.svg" />
</div>
}
依赖项
~255–700KB
~17K SLoC