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

use leptos::prelude::*;
use uuid::Uuid;

#[component]
pub fn Carousel<'a>(#[prop(optional, into)] class: &'a str, children: Children) -> impl IntoView {
    let class = format!("carousel slide {}", class);
    let id = Uuid::new_v4();
    let hash_id = format!("#{}", id);
    view! {
        <div id=id.to_string() class=class>
            <div class="carousel-inner">{children()}</div>
            <button
                class="carousel-control-prev"
                type="button"
                data-bs-target=hash_id.clone()
                data-bs-slide="prev"
            >
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button
                class="carousel-control-next"
                type="button"
                data-bs-target=hash_id
                data-bs-slide="next"
            >
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    }
}

#[component]
pub fn CarouselItem<'a>(
    #[prop(optional)] active: bool,
    #[prop(optional, into)] class: &'a str,
    children: Children,
) -> impl IntoView {
    let mut class = format!("carousel-item {}", class);
    if active {
        class.push_str(" active");
    }
    view! { <div class=class>{children()}</div> }
}