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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

use leptos::prelude::*;

#[component]
pub fn NavLink<'a>(
    #[prop(into)] href: &'a str,
    #[prop(optional)] active: bool,
    #[prop(optional)] disabled: bool,
    #[prop(optional, into)] class: &'a str,
    children: Children,
) -> impl IntoView {
    let mut className = "nav-link".to_string();
    if active {
        className.push_str(" active");
    }
    if disabled {
        className.push_str(" disabled");
    }
    let class = format!("nav-link {}", class);
    view! {
        <a class=class href=href>
            {children()}
        </a>
    }
}

#[component]
pub fn NavBar<'a>(#[prop(optional, into)] class: &'a str, children: Children) -> impl IntoView {
    let class = format!("navbar {}", class);
    view! { <nav class=class>{children()}</nav> }
}

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

#[component]
pub fn NavBarMenu(children: Children) -> impl IntoView {
    view! {
        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNavAltMarkup"
            aria-controls="navbarNavAltMarkup"
            aria-expanded="false"
            aria-label="Toggle navigation"
        >
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            {children()}
        </div>
    }
}

#[component]
pub fn NavItem(children: Children) -> impl IntoView {
    view! { <div class="navbar-item">{children()}</div> }
}

#[component]
pub fn NavBarNav<'a>(#[prop(optional, into)] class: &'a str, children: Children) -> impl IntoView {
    let class = format!("navbar-nav {}", class);
    view! { <ul class=class>{children()}</ul> }
}

#[component]
pub fn NavBarDropDown<'a>(
    #[prop(into)] label: &'a str,
    #[prop(optional, into)] class: &'a str,
    children: Children,
) -> impl IntoView {
    let class = format!("navbar-item dropdown {}", class);
    view! {
        <li class=class>
            <a
                class="nav-link dropdown-toggle"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
            >
                {label}
            </a>
            <ul class="dropdown-menu">{children()}</ul>
        </li>
    }
}

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

#[component]
pub fn NavBarText<'a>(#[prop(optional)] class: &'a str, children: Children) -> impl IntoView {
    let class = format!("navbar-text {}", class);
    view! { <span class=class>{children()}</span> }
}