示例组件

Button 组件

pub fn primary_button(props: VirtualNode) -> VirtualNode {
    let label: String = props.try_get_prop("label").unwrap_or_else(|| "Button".to_string());
    let onclick_handler: Option<NativeEventHandler> = props.try_get_event("onclick");
    html! {
        button {
            class: c_primary_button()
            onclick: onclick_handler
            label
        }
    }
}

使用：

html! {
    primary_button {
        label: "Click me"
        onclick: move |_event: Event| { /* 处理点击 */ }
        "Click me"
    }
}

Badge 组件

pub fn my_badge(props: VirtualNode) -> VirtualNode {
    let color: String = props.try_get_prop("color").unwrap_or_else(|| "#4f46e5".to_string());
    let text_prop: String = props.try_get_prop("text").unwrap_or_default();
    let on_click: Option<NativeEventHandler> = props.try_get_callback("on_click");
    html! {
        span {
            class: c_badge()
            style: {background: {color};}
            onclick: on_click
            text_prop
        }
    }
}

使用：

html! {
    my_badge {
        color: "#059669"
        text: "Success"
        on_click: move |_event: Event| { /* 点击处理 */ }
    }
}

Card 组件

pub fn my_card(props: VirtualNode) -> VirtualNode {
    let title: String = props.try_get_prop("title").unwrap_or_default();
    let children: Vec<VirtualNode> = props.get_children();
    html! {
        div {
            class: c_card()
            h3 { class: c_card_title() title }
            {VirtualNode::Fragment(children)}
        }
    }
}

使用：

html! {
    my_card {
        title: "Card Title"
        p { "Card content" }
    }
}

FormInput 组件

pub fn form_input(props: VirtualNode) -> VirtualNode {
    let label_text: String = props.try_get_prop("label").unwrap_or_default();
    let placeholder: String = props.try_get_prop("placeholder").unwrap_or_default();
    let value: String = props.try_get_prop("value").unwrap_or_default();
    html! {
        div {
            class: c_form_input_wrapper()
            label { class: c_form_label() label_text }
            input {
                r#type: "text"
                placeholder: placeholder
                value: value
                class: c_form_input()
            }
        }
    }
}

使用：

html! {
    form_input {
        label: "Username"
        placeholder: "Enter your username"
        value: ""
    }
}

Modal 组件

模态框组件支持弹出/关闭、遮罩层点击关闭和自定义内容：

pub fn my_modal(props: VirtualNode) -> VirtualNode {
    let title: String = props.try_get_prop("title").unwrap_or_default();
    let on_close: Option<NativeEventHandler> = props.try_get_callback("on_close");
    let children: Vec<VirtualNode> = props.get_children();
    html! {
        div {
            class: c_modal_overlay()
            onclick: on_close
            div {
                class: c_modal_content()
                onclick: move |_event: Event| {}
                div {
                    class: c_modal_header()
                    h3 { class: c_modal_title() title }
                    button {
                        onclick: on_close
                        "×"
                    }
                }
                div {
                    class: c_modal_body()
                    {VirtualNode::Fragment(children)}
                }
            }
        }
    }
}

使用：

html! {
    my_modal {
        title: "Confirm"
        on_close: move |_event: Event| { show_modal.set(false); }
        p { "Are you sure?" }
    }
}

VConsole 组件

虚拟控制台组件，用于在页面底部显示日志信息，支持日志级别过滤：

pub fn vconsole(props: VirtualNode) -> VirtualNode {
    // 实现日志收集、过滤、显示功能
    // 包含：切换按钮、日志面板、过滤栏、清除按钮
}

提示

组件嵌套直接在标签内嵌套即可：primary_button { my_badge { text: "Nested" } }

加载中...