leptos_ui 0.2.8

Macros to build UI components easily with Leptos and Tailwind CSS.
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

use leptos::prelude::*;

//
// EXPERIMENTAL. WILL CHANGE IN THE FUTURE.
//

/// Slot component that provides asChild pattern functionality for Leptos
///
/// This component allows you to change the underlying element while preserving styling.
///
/// Usage:
/// ```rust
/// <Slot class="btn-primary" as_child=SlotChild::A { href: "/dashboard".to_string() }>
///     "Go to Dashboard"
/// </Slot>
/// // Renders: <a href="/dashboard" class="btn-primary">Go to Dashboard</a>
///
/// <Slot class="btn-primary">
///     "Default Content"
/// </Slot>
/// // Renders: <div class="btn-primary">Default Content</div>
/// ```
#[component]
pub fn Slot(
    #[prop(into, optional)] class: Signal<String>,
    #[prop(into, optional)] style: Option<String>,
    #[prop(into, optional)] id: Signal<String>,
    #[prop(into, optional)] onclick: Option<String>,
    #[prop(into, optional)] data_slot: Signal<String>,
    #[prop(optional)] as_child: Option<SlotChild>,
    children: Children,
) -> impl IntoView {
    let class_value = move || class.get();
    let id_value = move || id.get();
    let data_slot_value = move || data_slot.get();

    match as_child {
        Some(SlotChild::A { href }) => view! {
            <a class=class_value style=style id=id_value href=href onclick=onclick data-slot=data_slot_value>
                {children()}
            </a>
        }
        .into_any(),

        None => view! {
            <div class=class_value style=style id=id_value onclick=onclick data-slot=data_slot_value>
                {children()}
            </div>
        }
        .into_any(),
    }
}

/// Defines the underlying element type for the Slot component
#[derive(Clone, Debug)]
pub enum SlotChild {
    /// Render as an anchor element
    A { href: String },
}