diomax类库

大多数diomax示例都使用纯字符串进行类定义，例如。

    button {
        class: "inline-flex border-0 py-1 px-3 focus:outline-none hover:bg-gray-700",
        "Button"
        RightArrowIcon {}
    }

这是Web开发中的常见方法，它非常强大，但不提供任何检查，类中的错别字将难以察觉。

工作原理

为了支持某个CSS框架，将简单的CSS值定义为字符串常量，将像hover:这样的修饰符定义为函数，然后你可以将前面的例子写成以下形式

    button {
        class: class!(inline_flex border_0 py_1 px_3 focus(outline_none) hover(bg_gray_700)),
        "Button"
        RightArrowIcon {}
    }

看起来很干净，清楚地显示了原始值，最重要的是，编译器现在会捕获任何错别字。

如何创建CSS框架

查看dioxus-tailwindcss以获取更多详细信息。

使用宏定义类常量

为了创建自定义CSS的常量，或为现有框架创建crate，常量是为了编译时检查而创建的。

由于CSS使用-作为分隔符，因此提供了宏，通过将-替换为_来生成Rust const。

这些宏可在dioxus_class::ext::*中使用；

constant!(btn success);
constant!(btn warning);

将被扩展为

pub const btn_success: &'static str = "btn-success";
pub const btn_warning: &'static str = "btn-warning";

定义一组常量

有许多类似值的组，手动定义起来不容易，简单的宏规则可以创建来简化这个过程。

#[macro_export]
macro_rules! colors {
    ( $( $prefix:ident )* ) => {
        constant!($( $prefix )* inherit);
        constant!($( $prefix )* current);
        constant!($( $prefix )* transparent);
        constant!($( $prefix )* black);
        constant!($( $prefix )* white);

        constant!($( $prefix )* slate 50);
        constant!($( $prefix )* slate 100);
        constant!($( $prefix )* slate 200);
        constant!($( $prefix )* slate 300);
        constant!($( $prefix )* slate 400);
        constant!($( $prefix )* slate 500);
        constant!($( $prefix )* slate 600);
        constant!($( $prefix )* slate 700);
        constant!($( $prefix )* slate 800);
        constant!($( $prefix )* slate 900);

        constant!($( $prefix )* gray 50);
        constant!($( $prefix )* gray 100);
        constant!($( $prefix )* gray 200);
        constant!($( $prefix )* gray 300);
        constant!($( $prefix )* gray 400);
        constant!($( $prefix )* gray 500);
        constant!($( $prefix )* gray 600);
        constant!($( $prefix )* gray 700);
        constant!($( $prefix )* gray 800);
        constant!($( $prefix )* gray 900);
        ...
    }
}

// https://tailwind.org.cn/docs/border-color
colors!(border);
colors!(border x);
colors!(border y);
colors!(border t);
colors!(border r);
colors!(border b);
colors!(border l);

构建所有使用的CSS类

由于tailwindcss需要获取所有使用的值，当使用class!时，默认的构建过程不适用。

查看BUILD.md了解如何处理此过程。