leptos-bootstrap 0.0.2

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

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>
    }
}