dioxus_ui 0.1.1

Build modular UI components in just 1 line. Tailored for the Dioxus framework.
Documentation 
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

use dioxus::prelude::*;
pub use tw_merge::*;

/// A macro for creating UI components with tailwind classes in Dioxus.
///
/// This macro simplifies the creation of components that use tailwind classes
/// by handling the merging of base classes with user-provided classes.
///
/// # Example
///
/// ```rust
/// use dioxus_ui::clx;
///
/// mod components {
///     use super::*;
///     clx! {Card, div, "rounded-lg border bg-card shadow p-4 w-full"}
///     clx! {CardHeader, div, "flex flex-col space-y-1.5"}
///     clx! {CardTitle, h3, "text-2xl font-semibold leading-none tracking-tight"}
/// }
///
/// pub use components::*;
/// ```
#[macro_export]
macro_rules! clx {
    ($name:ident, $element:ident, $($base_class:expr),+ $(,)?) => {
        #[component]
        pub fn $name(
            #[props(into, optional)] class: Option<String>,
            #[props(optional)] role: Option<&'static str>,
            #[props(optional)] style: Option<&'static str>,
            children: Element,
        ) -> Element {
            let merged_class = use_memo(move || {
                tw_merge::tw_merge!(
                    tw_merge::tw_join!($($base_class),+),
                    class.as_deref().unwrap_or("")
                )
            });

            rsx! {
                $element {
                    class: "{merged_class}",
                    role: role,
                    style: style,
                    {children}
                }
            }
        }
    };
}

/// Helper macro to join multiple tailwind classes into a single string.
///
/// This is used internally by the `clx!` macro but can also be used separately.
#[macro_export]
macro_rules! tw_join {
    ($($class:expr),+) => {
        [$($class),+].join(" ")
    };
}