euv-example 0.5.8

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

use crate::*;

/// An IntersectionObserver demo page showcasing viewport intersection detection.
///
/// Demonstrates how to observe a container element for viewport intersection
/// changes, logging intersection ratio and child item visibility.
///
/// # Returns
///
/// - `VirtualNode` - The observer demo page virtual DOM tree.
#[component]
pub(crate) fn page_observer(node: VirtualNode<PageObserverProps>) -> VirtualNode {
    let PageObserverProps = node.try_get_props().unwrap_or_default();
    use_intersection_observer("[data-observer-container]");
    html! {
        div {
            class: c_page_container()
            page_header {
                title: "Observer"
                subtitle: "IntersectionObserver API demo: detect when elements enter or leave the viewport."
            }
            my_card {
                title: "Intersection Observer"
                p {
                    class: c_demo_text()
                    "The container below is observed for viewport intersection changes."
                }
                p {
                    class: c_demo_text_muted()
                    "Open the browser console to see intersection events logged as you scroll."
                }
                ul {
                    class: c_list_ul()
                    data-observer-container: "true"
                    for index in { 0..20 } {
                        li {
                            key: index.to_string()
                            class: if { index % 2 == 0 } { c_list_item_even() } else { c_list_item_odd() }
                            data_index: index.to_string()
                            span {
                                class: c_list_item_text()
                                format!("Observed Item {}", index + 1)
                            }
                        }
                    }
                }
            }
        }
    }
}