dioxus_tw_components/components/atoms/buttongroup/
style.rs

1use super::props::*;
2use crate::attributes::*;
3use dioxus::prelude::*;
4
5impl Class for ButtonGroupProps {
6    fn base(&self) -> &'static str {
7        "inline-flex border border-border bg-background rounded-global-radius divide-border divide-x"
8    }
9
10    fn color(&self) -> Option<&'static str> {
11        Some("")
12    }
13
14    fn size(&self) -> Option<&'static str> {
15        Some("")
16    }
17
18    fn animation(&self) -> Option<&'static str> {
19        Some("")
20    }
21}
22
23impl Class for ButtonGroupItemProps {
24    fn base(&self) -> &'static str {
25        "text-center font-medium first:rounded-l-global-radius last:rounded-r-global-radius disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer select-none"
26    }
27
28    fn color(&self) -> Option<&'static str> {
29        Some(match *self.color.read() {
30            Color::Default => {
31                "bg-foreground text-background hover:bg-foreground/80 active:bg-foreground/70 active:shadow-sm"
32            }
33            Color::Primary => {
34                "bg-primary text-primary-foreground border-primary hover:bg-primary/90 active:bg-primary/80 active:shadow-sm"
35            }
36            Color::Secondary => {
37                "bg-secondary text-secondary-foreground border-secondary hover:bg-secondary/90 active:bg-secondary/80 active:shadow-sm"
38            }
39            Color::Destructive => {
40                "bg-destructive text-destructive-foreground border-destructive hover:bg-destructive/90 active:bg-destructive/80 active:shadow-sm"
41            }
42            Color::Success => {
43                "bg-success text-success-foreground border-success hover:bg-success/90 active:bg-success/80 active:shadow-sm"
44            }
45            Color::Accent => {
46                "bg-accent text-accent-foreground border-accent hover:bg-accent/90 active:bg-accent/80 active:shadow-sm"
47            }
48            Color::Muted => {
49                "bg-muted text-muted-foreground border-muted hover:bg-muted/90 active:bg-muted/80 active:shadow-sm"
50            }
51        })
52    }
53
54    fn size(&self) -> Option<&'static str> {
55        Some(match *self.size.read() {
56            Size::Xs => "h-4 px-2 text-xs",
57            Size::Sm => "h-7 px-3 py-1 text-sm",
58            Size::Md => "h-9 px-4 py-2 text-sm",
59            Size::Lg => "h-11 px-7 py-2 text-lg",
60            Size::Xl => "h-14 px-9 py-3 text-xl",
61        })
62    }
63
64    fn animation(&self) -> Option<&'static str> {
65        Some(match *self.animation.read() {
66            Animation::None => "",
67            Animation::Light | Animation::Full => "transition-colors duration-150",
68            // Animation::Full => "relative z-30 after:-z-20 after:absolute after:h-1 after:w-1 after:bg-background/80 after:left-5 overflow-hidden after:bottom-0 after:translate-y-full after:rounded-md hover:after:scale-300 hover:after:transition-all hover:after:duration-700 after:transition-all after:duration-700 transition-all duration-700",
69        })
70    }
71}
dioxus_tw_components/components/atoms/buttongroup/style.rs

dioxus_tw_components/components/atoms/buttongroup/
style.rs
