euv-example 0.5.6

An example application demonstrating the euv UI framework with reactive signals, custom components, and WebAssembly.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

use crate::*;

/// A dynamic tag demo page showcasing runtime tag switching.
///
/// Demonstrates the `{tag_expr} { content }` syntax for dynamic tags where
/// the tag name is determined at runtime based on a signal value. When the
/// signal changes, the dynamic tag automatically re-renders as either a
/// native HTML element or a user component.
///
/// # Returns
///
/// - `VirtualNode` - The dynamic component demo page virtual DOM tree.
pub(crate) fn page_dynamic_component() -> VirtualNode {
    let tag_name: Signal<String> = use_signal(|| DEFAULT_TAG_NAME.to_string());
    let content: Signal<String> = use_signal(|| "Hello, dynamic tag!".to_string());
    html! {
        div {
            class: c_page_container()
            page_header("Dynamic Tag", "Switch tags at runtime using the {tag} { content } syntax.")
            my_card {
                title: "Tag Type Selection"
                p {
                    class: c_demo_text()
                    "Select a tag type below. Native HTML elements (div, span) and user components (my_card, badge) are both supported."
                }
                div {
                    class: c_dynamic_component_tab_bar()
                    primary_button {
                        label: TAG_OPTION_DIV_LABEL
                        onclick: tag_on_select(tag_name, TAG_NAME_DIV)
                        TAG_OPTION_DIV_LABEL
                    }
                    primary_button {
                        label: TAG_OPTION_SPAN_LABEL
                        onclick: tag_on_select(tag_name, TAG_NAME_SPAN)
                        TAG_OPTION_SPAN_LABEL
                    }
                    primary_button {
                        label: TAG_OPTION_MY_CARD_LABEL
                        onclick: tag_on_select(tag_name, TAG_NAME_MY_CARD)
                        TAG_OPTION_MY_CARD_LABEL
                    }
                    primary_button {
                        label: TAG_OPTION_BADGE_LABEL
                        onclick: tag_on_select(tag_name, TAG_NAME_BADGE)
                        TAG_OPTION_BADGE_LABEL
                    }
                }
            }
            my_card {
                title: "Dynamic Tag Content"
                div {
                    class: c_form_input_wrapper()
                    label {
                        r#for: TAG_CONTENT_INPUT_ID
                        class: c_form_label()
                        "Content Text"
                    }
                    input {
                        id: TAG_CONTENT_INPUT_ID
                        name: TAG_CONTENT_INPUT_ID
                        r#type: "text"
                        placeholder: TAG_CONTENT_PLACEHOLDER
                        value: content
                        autocomplete: TAG_AUTOCOMPLETE_OFF
                        class: c_form_input()
                        oninput: content_on_input(content)
                    }
                }
            }
            my_card {
                title: "Result"
                p {
                    class: c_demo_text_muted()
                    { format!("Current tag: {}", tag_name.get()) }
                }
                div {
                    class: c_dynamic_component_panel()
                    { tag_name.get() } {
                        title: "Dynamic my_card"
                        onclick: badge_on_click("Dynamic Badge", LogLevel::Log)
                        { content.get() }
                    }
                }
            }
        }
    }
}