示例组件

Button 组件

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

使用：

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

Badge 组件

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

使用：

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

Card 组件

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

使用：

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

FormInput 组件

pub fn form_input(props: VirtualNode) -> VirtualNode {
    let label_text: String = props
        .try_get_prop(&Attribute::Other("label".to_string()))
        .unwrap_or_default();
    let placeholder: String = props.try_get_prop(&Attribute::Placeholder).unwrap_or_default();
    let value: String = props.try_get_prop(&Attribute::Value).unwrap_or_default();
    rsx! {
        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()
            }
        }
    }
}

使用：

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

提示

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

加载中...