leptos_bootstrap/v5/
carousel.rs

1use leptos::prelude::*;
2use uuid::Uuid;
3
4#[component]
5pub fn Carousel<'a>(#[prop(optional, into)] class: &'a str, children: Children) -> impl IntoView {
6    let class = format!("carousel slide {}", class);
7    let id = Uuid::new_v4();
8    let hash_id = format!("#{}", id);
9    view! {
10        <div id=id.to_string() class=class>
11            <div class="carousel-inner">{children()}</div>
12            <button
13                class="carousel-control-prev"
14                type="button"
15                data-bs-target=hash_id.clone()
16                data-bs-slide="prev"
17            >
18                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
19                <span class="visually-hidden">Previous</span>
20            </button>
21            <button
22                class="carousel-control-next"
23                type="button"
24                data-bs-target=hash_id
25                data-bs-slide="next"
26            >
27                <span class="carousel-control-next-icon" aria-hidden="true"></span>
28                <span class="visually-hidden">Next</span>
29            </button>
30        </div>
31    }
32}
33
34#[component]
35pub fn CarouselItem<'a>(
36    #[prop(optional)] active: bool,
37    #[prop(optional, into)] class: &'a str,
38    children: Children,
39) -> impl IntoView {
40    let mut class = format!("carousel-item {}", class);
41    if active {
42        class.push_str(" active");
43    }
44    view! { <div class=class>{children()}</div> }
45}