leptos-bootstrap 0.0.3

Bootstrap styled components for leptos.
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

use leptos::prelude::*;

use crate::v5::{ButtonKind, ButtonSize};

#[component]
pub fn DropDown<'a>(
    #[prop(optional, into)] label: &'a str,
    #[prop(default = ButtonKind::Primary)] kind: ButtonKind,
    #[prop(optional, into)] class: &'a str,
    children: Children,
) -> impl IntoView {
    let dropdown_class = format!("dropdown {}", class);
    let btn_class = format!("btn dropdown-toggle {}", kind);
    view! {
        <div class=dropdown_class>
            <button class=btn_class type="button" data-bs-toggle="dropdown" aria-expanded="false">
                {label}
            </button>
            <ul class="dropdown-menu">{children()}</ul>
        </div>
    }
}

#[component]
pub fn DropDownItem<'a>(
    #[prop(default = "#", into)] href: &'a str,
    #[prop(optional, into)] class: &'a str,
    children: Children,
) -> impl IntoView {
    let class = format!("dropdown-item {}", class);
    view! {
        <li>
            <a class=class href=href>
                {children()}
            </a>
        </li>
    }
}

#[component]
pub fn DropDownDivider() -> impl IntoView {
    view! {
        <li>
            <hr class="dropdown-divider" />
        </li>
    }
}

#[component]
pub fn SplitButton<'a>(
    #[prop(optional, into)] label: &'a str,
    #[prop(default = ButtonKind::Primary)] kind: ButtonKind,
    #[prop(default = ButtonSize::Normal)] size: ButtonSize,
    #[prop(optional, into)] class: &'a str,
    children: Children,
) -> impl IntoView {
    let btn_class = format!("btn {} {}", size, class);
    let dropdown_class = format!(
        "btn dropdown-toggle dropdown-toggle-split {} {}",
        kind, size
    );
    view! {
        <div class="btn-group">
            <button type="button" class=btn_class>
                {label}
            </button>
            <button
                type="button"
                class=dropdown_class
                data-bs-toggle="dropdown"
                aria-expanded="false"
            >
                <span class="visually-hidden">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu">{children()}</ul>
        </div>
    }
}