dioxus_slides/
slide.rs

1use dioxus::prelude::*;
2use std::{fmt::Display, str::FromStr};
3
4/// This trait can be derived using the `#[derive(Slidable)]` macro.
5pub trait Slidable: FromStr + Display + Clone + 'static {
6    fn render<'a>(&self, cx: &'a ScopeState) -> Element<'a>;
7    fn next(&self) -> Option<Self>;
8    fn prev(&self) -> Option<Self>;
9    fn slide_number(&self) -> usize;
10    fn number_of_slides(&self) -> usize;
11}
12
13#[derive(Props)]
14pub struct SlideProps<'a> {
15    content: Element<'a>,
16}
17
18pub fn Slide<'a, S: Slidable + Clone + 'static>(cx: Scope<'a, SlideProps<'a>>) -> Element<'a> {
19    let deck = use_shared_state::<S>(cx).expect("Failed to get shared state");
20
21    let prev = deck.read().prev();
22    let next = deck.read().next();
23
24    cx.render(rsx! {
25        div {
26            style: "position: relative; min-height: 99vh; min-width: 99vw;",
27            div {
28                style: "z-index: 0; height: 100%; width: 100%; position: absolute; top: 0; left: 0;",
29                cx.props.content.clone()
30            }
31            if let Some(prev) = prev.clone() {
32                render! {
33                    div {
34                        // show on the left side of the screen for 20% of the screen
35                        style: "z-index: 10; height: 100%; width: 20%; position: absolute; top: 0; left: 0;",
36                        onclick: move |_| {
37                            let mut deck = deck.write();
38                            *deck = prev.clone();
39                        }
40                    }
41                }
42            }
43            if let Some(next) = next.clone() {
44                render! {
45                    div {
46                        style: "z-index: 10; height: 100%; width: 20%; position: absolute; top: 0; left: 80%;",
47                        onclick: move |_| {
48                            let mut deck = deck.write();
49                            *deck = next.clone();
50                        }
51                    }
52                }
53            }
54        }
55    })
56}
dioxus_slides/slide.rs

dioxus_slides/
slide.rs
