canonrs-server 0.1.0

CanonRS server-side rendering support
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

use leptos::prelude::*;
use super::collapsible_boundary::{Collapsible, CollapsibleTrigger, CollapsibleContent};
use canonrs_core::primitives::layout::stack::{StackPrimitive as Stack, StackDirection, StackGap};

#[component]
pub fn CollapsibleShowcasePreview() -> impl IntoView {
    view! {
        <Stack direction=StackDirection::Vertical gap=StackGap::Lg>
            <Collapsible>
                <CollapsibleTrigger>"Toggle details"</CollapsibleTrigger>
                <CollapsibleContent>
                    "Hidden content revealed on toggle. State governed by signal."
                </CollapsibleContent>
            </Collapsible>
            <p data-rs-showcase-preview-anchor="">
                "Single toggle — open/close state via signal. SSR-safe, hydration-safe."
            </p>
            <Stack direction=StackDirection::Vertical gap=StackGap::Sm>
                <span data-rs-showcase-preview-label="">"Initially open"</span>
                <Collapsible open=true>
                    <CollapsibleTrigger>"Advanced options"</CollapsibleTrigger>
                    <CollapsibleContent>
                        "These options are visible by default because open=true was passed."
                    </CollapsibleContent>
                </Collapsible>
            </Stack>
            <Stack direction=StackDirection::Vertical gap=StackGap::Sm>
                <span data-rs-showcase-preview-label="">"Nested"</span>
                <Collapsible>
                    <CollapsibleTrigger>"Parent"</CollapsibleTrigger>
                    <CollapsibleContent>
                        <Collapsible>
                            <CollapsibleTrigger>"Child"</CollapsibleTrigger>
                            <CollapsibleContent>"Nested collapsible content."</CollapsibleContent>
                        </Collapsible>
                    </CollapsibleContent>
                </Collapsible>
            </Stack>
        </Stack>
    }
}