dioxus-html: Dioxus 的 Html（和 SVG）命名空间

网站 | 指南 | API 文档 | 聊天

概述

Dioxus 的 rsx! 和 html! 宏可以在 NodeFactory 的基础上接受任何编译时正确的命名空间。这个 crate 提供了 HTML（和 SVG）命名空间，这些命名空间在 Dioxus 预导入中导入。

然而，这种抽象使您能够在调用 rsx! 时添加任何命名空间，只要它们在作用域内。例如，为增强现实设计的 UI 可能会使用与 HTML 不同的基本元素。

use ar_namespace::*;

rsx! {
    magic_div {
        magic_header {}
        magic_paragraph {
            on_magic_click: move |event| {
                //
            }
        }
    }
}

这目前是 Dioxus 中不太被探索的部分。然而，命名空间系统确实使提供语法高亮、文档、“转到定义”和编译时正确性成为可能，因此抽象化它是值得的。

它的工作原理

用于 dioxus 的元素必须实现（简单的）DioxusElement 特性，才能在 rsx! 宏中使用。

struct div;
impl DioxusElement for div {
    const TAG_NAME: &'static str = "div";
    const NAME_SPACE: Option<&'static str> = None;
}

所有元素都应该定义为零大小的结构体（也称为单元结构体）。这些结构体是零成本的，只为 Rust 提供类型级别的技巧，以实现编译时正确的模板。

属性随后在这些单元结构体上作为常量实现。

HTML 命名空间主要使用宏定义。然而，展开形式可能看起来像这样

struct base;
impl DioxusElement for base {
    const TAG_NAME: &'static str = "base";
    const NAME_SPACE: Option<&'static str> = None;
}
impl base {
    const href: (&'static str, Option<'static str>, bool) = ("href", None, false);
    const target: (&'static str, Option<'static str>, bool) = ("target", None, false);
}

因为属性是在单元结构体上定义为方法的，所以它们在编译时正确的接口后面保护了属性创建。

如何扩展它

每当调用 rsx! 宏时，它都依赖于作用域内的模块 dioxus_elements。当您在 dioxus 中启用 html 功能时，此模块会导入到预导入中。但是，您可以通过创建自己的 dioxus_elements 模块并重新导出 html 命名空间来扩展此内容。

mod dioxus_elements {
    use dioxus::prelude::dioxus_elements::*;
    struct my_element;
    impl DioxusElement for my_element {
        const TAG_NAME: &'static str = "base";
        const NAME_SPACE: Option<&'static str> = None;
    }
}

贡献

• 在我们的问题追踪器上报告问题。
• 加入Discord并提问！

许可证

本项目采用MIT许可证。

除非您明确声明，否则您有意提交给Dioxus的任何贡献均应作为MIT许可证，不附加任何其他条款或条件。