虚拟 DOM

创建节点

use euv::*;

// 创建元素节点
let node: VirtualNode = VirtualNode::get_element_node("div");

// 创建文本节点
let text: VirtualNode = VirtualNode::get_text_node("Hello");

// 链式添加属性和子节点
let node: VirtualNode = VirtualNode::get_element_node("div")
    .with_attribute("id", AttributeValue::Text("app".to_string()))
    .with_child(VirtualNode::get_text_node("Content"));

提取属性

// 提取字符串属性
let title: Option<String> = props.try_get_prop(&Attribute::Title);

// 提取标准 HTML 属性
let placeholder: String = props.try_get_prop(&Attribute::Placeholder).unwrap_or_default();
let value: String = props.try_get_prop(&Attribute::Value).unwrap_or_default();

// 提取事件处理器
let onclick: Option<NativeEventHandler> = props.try_get_event(&NativeEventName::Click);

// 通过自定义名称提取回调
let on_click: Option<NativeEventHandler> = props.try_get_callback("on_click");

// 提取子节点
let children: Vec<VirtualNode> = props.get_children();

// 提取文本内容
let text: Option<String> = node.try_get_text();

内联样式

let style: Style = Style::default()
    .property("flex_direction", "column")
    .property("padding", "10px");
let css_string: String = style.to_css_string();

提示

样式属性名使用 snake_case，框架自动转换为 kebab-case（如 flex_direction → flex-direction）。

CSS 类

// class! 宏定义的 CSS 类可直接在 rsx! 中使用
rsx! {
    div {
        class: c_card()
        "Content"
    }
}

提示

CSS 类首次使用时自动注入样式到 DOM，无需手动引入 CSS 文件。

加载中...