dioxus_element_plug/components/
carousel.rs

1use dioxus::prelude::*;
2
3/// Carousel props
4#[derive(Props, Clone, PartialEq)]
5pub struct CarouselProps {
6    #[props(default)]
7    pub children: Element,
8
9    /// Initial slide index
10    #[props(default = 0)]
11    pub initial_index: u32,
12
13    /// Slide height
14    #[props(default = "300px".to_string())]
15    pub height: String,
16
17    /// Trigger type
18    #[props(default = "hover".to_string())]
19    pub trigger: String,
20
21    /// Whether to autoplay
22    #[props(default = true)]
23    pub autoplay: bool,
24
25    /// Autoplay interval in ms
26    #[props(default = 3000)]
27    pub interval: u32,
28
29    /// Indicator position
30    #[props(default = "outside".to_string())]
31    pub indicator_position: String,
32
33    /// Arrow display
34    #[props(default = "hover".to_string())]
35    pub arrow: String,
36
37    /// Carousel type
38    #[props(default = "default".to_string())]
39    pub carousel_type: String,
40
41    #[props(default)]
42    pub on_change: Option<EventHandler<u32>>,
43
44    #[props(default)]
45    pub class: Option<String>,
46
47    #[props(default)]
48    pub style: Option<String>,
49}
50
51/// Carousel component for image/content slideshows
52#[component]
53pub fn Carousel(props: CarouselProps) -> Element {
54    let mut class_names = vec!["el-carousel".to_string()];
55    if props.carousel_type == "card" { class_names.push("el-carousel--card".to_string()); }
56    if let Some(ref c) = props.class { class_names.push(c.clone()); }
57
58    rsx! {
59        div {
60            class: "{class_names.join(\" \")}",
61            style: "height: {props.height}; {props.style.clone().unwrap_or_default()}",
62            div {
63                class: "el-carousel__container",
64                style: "height: {props.height};",
65                {props.children}
66            }
67            div {
68                class: "el-carousel__indicators--{props.indicator_position}",
69                button {
70                    class: "el-carousel__button",
71                }
72            }
73        }
74    }
75}
dioxus_element_plug/components/carousel.rs

dioxus_element_plug/components/
carousel.rs
