hikari-components 0.1.5

Core UI components (40+) for the Hikari design system
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

// hikari-components/src/layout/scrollbar.rs
//! Custom Scrollbar Container component
//!
//! A Dioxus component wrapper that uses the script-based scrollbar system.
//! The component renders a container that's initialized by the script.

use crate::prelude::*;

/// A custom scrollbar container that hides native scrollbars in favor of script-based ones.
#[component]
pub fn ScrollbarContainer(
    children: Element,

    #[props(default = "100%".to_string())] height: String,

    #[props(default = "100%".to_string())] width: String,

    #[props(default)] class: String,
) -> Element {
    rsx! {
        div {
            class: format!("custom-scrollbar-container-vdom {}", class),
            style: "position: relative; display: flex; width: {width}; height: {height}; overflow: hidden;",

            div {
                class: "custom-scrollbar-content-vdom",
                "data-custom-scrollbar": "content",
                style: "overflow-y: auto; overflow-x: hidden; flex: 1; min-width: 0; -ms-overflow-style: none; scrollbar-width: none;",

                {children}
            }
        }
    }
}

pub struct ScrollbarContainerComponent;

impl crate::styled::StyledComponent for ScrollbarContainerComponent {
    fn styles() -> &'static str {
        r#"
.custom-scrollbar-container-vdom {
  position: relative;
  display: flex;
}

.custom-scrollbar-container-vdom .custom-scrollbar-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.custom-scrollbar-container-vdom .custom-scrollbar-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
}

.custom-scrollbar-container-vdom .custom-scrollbar-content::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.custom-scrollbar-container-vdom .custom-scrollbar-content {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
"#
    }

    fn name() -> &'static str {
        "scrollbar"
    }
}