class! 宏

eastspire小于 1 分钟euvuirustwasmmacrosclass

定义 CSS 类

use euv_macros::*;

class! {
    pub container {
        max_width: "800px";
        margin: "0 auto";
    }
    pub(crate) header {
        font_size: "28px";
    }
    hidden {
        display: "none";
    }
}

可见性修饰

修饰符	说明
`pub`	公开，生成公开的 CSS 类函数
`pub(crate)`	crate 内可见
无修饰	私有

在 RSX 中使用

rsx! {
    div {
        class: c_card()
        h3 { "Card Title" }
        p { "Card content" }
    }
}

提示

class! 宏会生成与类名同名的函数，返回 CssClass 实例，调用时需要加 ()。

样式属性名

样式属性名使用 snake_case，自动转换为 kebab-case：

class! {
    pub c_flex_row {
        display: "flex";
        flex_direction: "row";      // → flex-direction
        align_items: "center";      // → align-items
        justify_content: "center";  // → justify-content
        gap: "10px";
    }
}

提示

CSS 类首次使用时自动注入样式到 DOM，无需手动引入 CSS 文件。