Consecuit HTML

lib.rs:

为[consecuit]提供HTML组件。

此crate提供了如div、span、table等[consecuit]组件。

基本用法

还可以查看[consecuit]的文档，其中也包含一些使用此组件的信息。

首先导入预定义

use consecuit_html::prelude::*;

然后您可以使用与HTML相同的结构在cc_tree!宏中使用组件

cc_tree!(
<div>
<div>
</div>
</div>
<span>"hello"</span>
)

属性

此crate中的所有组件都接受可以使用构建者模式构建的属性。

从html_props()[elem::html_props()]开始，然后添加您的属性。如下所示

cc_tree!(
<div {html_props().class_name("container container-box").onclick(click_handler)}>
</div>
)

如class_name或href之类的字符串属性接受任何可以转换为Into<Cow<'static, str>>的东西。在上面的代码中，class_name可以接受"container container-box"，因为它是一个&'static str，它是一个Into<Cow<'static, str>>。

如onclick或oninput之类的事件属性接受一个Callback。可以使用Callback::new创建一个Callback，如下所示

let click_handler = Callback::new(move |ev: web_sys::MouseEvent| {
web_sys::console::log_1(
&"You clicked the button!".into()
);
});

cc_tree!(
<button {html_props().onclick(click_handler)}>"click me!"</button>
)

有时您可能会遇到有关属性不明确的错误。例如，许多不同的组件都接受href。编译器不会允许这种情况

<a {html_props().href("https://example.com")}>"Go to web"</a>

您必须使用 HtmlProps<(web_sys 元素类型)>。例如

<a {HtmlProps::<web_sys::HtmlAnchorElement>::new().href("https://example.com")}>"Go to web"</a>

参考

要获取底层 [web_sys] 元素的引用，可以使用 reference 属性。

reference 属性接受元素类型的 Option 引用。例如，输入标签 (<input>) 的底层元素是 web_sys::HtmlInputElement。因此，它的引用必须是 Reference<Option<web_sys::HtmlInputElement>>。

let (cc, input_ref): (_, Reference<Option<web_sys::HtmlInputElement>>) = cc.hook(use_ref, ());
cc_tree!(
<input {html_props().reference(input_ref)} />
)

引用内部的 Option 在组件至少渲染一次后保证为 Some。

然后，您可以使用 Reference 中的方法对底层 [web_sys] 元素进行操作。

例如，这读取一个并将其设置为空。

let (cc, input_ref): (_, Reference<Option<web_sys::HtmlInputElement>>) = cc.hook(use_ref, ());
let submit_click_handler = Callback::new(move |_ev| {
let input_value = input_ref.visit_with(|opt: &Option<web_sys::HtmlInputElement>| {
// Unwrap the Option<web_sys::HtmlInputElement>
let inp: &web_sys::HtmlInputElement = opt.as_ref().unwrap();

// Get the value
let value = inp.value();

// Set it to empty
inp.set_value("");

value
}).unwrap();
web_sys::console::log_1(&format!("The submitted value was: {}", input_value).into());
});

cc_tree!(
<input {html_props().reference(input_ref)} />
<button {html_props().onclick(submit_click_handler)}>"submit"</button>
)

注意

此包中的大多数组件和属性都是由解析 [web_sys] 的 API 和抓取 MDN 生成的。

只有由 [web_sys] 提供的具有 set_ 方法的属性才作为属性可用。例如，[web_sys] 有 set_class_name，因此我们有 class_name 属性。

最值得注意的是，缺少样式。[web_sys] 没有 set_style。（它有一个更复杂的样式系统）。目前您必须坚持使用类名和 CSS。

欢迎贡献力量。