css-style

· · · · ·

此Crate为您提供了带有构建器风格的类型化CSS样式。 查看API文档（master）

注意： css-style目前不是生产就绪的，但适用于用于边项目或内部工具。

特性

• 类型化CSS值：CSS单位和值都是类型化的（例如 Length， Px， BorderStyle::None 等）
• 构建器方法：为每个css-style属性提供构建器模式方法（嗯，不是所有！:P）。因此，您不需要导入那么多枚举类型。

目标

此Crate的目标是提供一个带有构建器模式方法的 Style 对象，以构建CSS内联样式值，从而可以与其他与HTML标签样式一起工作的crate（如 dioxus， yew， tinytemplate 等）一起使用。

非目标

Style 对象不是为了解析或从其中检索类型化值而设计的。考虑使用其他crate进行解析。

快速示例

use css_style::{prelude::*, color, unit::{ms, px}};

let style = style()
    .and_transition(|conf| {
        conf
            .insert("opacity", |conf| conf.duration(ms(150.)).ease())
            .insert("transform", |conf| conf.duration(ms(150.)).ease())
            .insert("visibility", |conf| conf.duration(ms(150.)).ease())
    })
    .and_position(|conf| conf.absolute())
    .and_background(|conf| conf.color(color::named::WHITE))
    .and_border(|conf| {
        conf.none()
            .width(px(0))
            .radius(px(4))
    })
    .and_padding(|conf| conf.x(px(4)).y(px(2)))
    .and_margin(|conf| conf.top(px(2)))
    .insert("box-shadow", "0 2px 8px rgba(0, 35, 11, 0.15)");

println!("{}", style);

这将打印

transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
position: absolute;
background-color: white;
border-left-width: 0px;
border-left-style: none;
border-top-width: 0px;
border-top-style: none;
border-right-width: 0px;
border-right-style: none;
border-bottom-width: 0px;
border-bottom-style: none;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding-top: 2px;
padding-right: 4px;
padding-bottom: 2px;
padding-left: 4px;
margin-top: 2px;
box-shadow: 0 2px 8px rgba(0, 35, 11, 0.15);