rsx! 宏

基本用法

use euv::*;

rsx! {
    div {
        class: c_container()
        h1 { "Hello, euv!" }
        button {
            onclick: move |_| { /* handle click */ }
            "Click me"
        }
    }
}

字符串属性

rsx! {
    input {
        r#type: "text"
        placeholder: "Enter your name"
        value: "default value"
    }
}

提示

Rust 关键字（如 type）需使用 r# 前缀：r#type: "text"

信号属性

let count: Signal<i32> = use_signal(|| 0);

rsx! {
    span { count }
}

事件属性

rsx! {
    button {
        onclick: move |event: NativeEvent| {
            // 处理点击
        }
        "Click me"
    }
}

CSS 类属性

rsx! {
    div {
        class: c_container()
        "Content"
    }
}

内联样式属性

rsx! {
    div {
        style: {display: "flex"; padding: "10px"; font_size: "14px";}
        "Content"
    }
}

提示

内联样式使用 snake_case，自动转换为 kebab-case（如 font_size → font-size）。

布尔属性

let agree: Signal<bool> = use_signal(|| true);

rsx! {
    input {
        r#type: "checkbox"
        checked: agree
    }
}

自定义属性

rsx! {
    div {
        data_role: "container"
        data_id: "12345"
        aria_label: "Demo section"
        "Custom attributes"
    }
}

条件渲染

rsx! {
    if {show.get()} {
        div { "Visible" }
    } else {
        ""
    }
}

match 表达式

rsx! {
    match {route.get().as_str()} {
        "/" => { page_home() }
        "/about" => { page_about() }
        _ => { page_not_found() }
    }
}

嵌入表达式

rsx! {
    div {
        {format!("Count: {}", count.get())}
    }
}

注意

if 的 else 分支不能省略，match 必须包含 _ 通配分支。

加载中...