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">
12                {children()}
13            </div>
14            <button class="carousel-control-prev" type="button" data-bs-target=hash_id.clone() data-bs-slide="prev">
15               <span class="carousel-control-prev-icon" aria-hidden="true"></span>
16               <span class="visually-hidden">Previous</span>
17             </button>
18             <button class="carousel-control-next" type="button" data-bs-target=hash_id data-bs-slide="next">
19               <span class="carousel-control-next-icon" aria-hidden="true"></span>
20               <span class="visually-hidden">Next</span>
21             </button>
22        </div>
23    }
24}
25
26#[component]
27pub fn CarouselItem<'a>(
28    #[prop(optional)] active: bool,
29    #[prop(optional, into)] class: &'a str,
30    children: Children,
31) -> impl IntoView {
32    let mut class = format!("carousel-item {}", class);
33    if active {
34        class.push_str(" active");
35    }
36    view! {
37        <div class=class>
38            {children()}
39        </div>
40    }
41}