hikari-components 0.3.10

Core UI components (buttons, inputs, tables, modals) 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

// 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::*;

///
///
///
///
#[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-wrapper-vdom {}", class),
            style: "position: relative; display: flex; width: {width}; height: {height}; overflow: hidden;",

            // Content area - will be wrapped by the script
            div {
                class: "custom-scrollbar-content-vdom",
                style: "flex: 1; overflow-y: auto; overflow-x: hidden; min-width: 0;",
                "data-custom-scrollbar": "content",

                {children}
            }
        }
    }
}

pub struct ScrollbarContainerComponent;

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

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

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

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

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