leptos_bootstrap/v5/
carousel.rs1use 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}