Expand description
css-style
·
·
·
·
·
This crate provides you a typed CSS style with builder-style methods. See API Docs (master)
NOTE: css-style is not (yet) production ready but is good for use in side projects and internal tools.
Features
- Typed CSS Values: CSS units and values are all typed (.e.g
Length,Px,BorderStyle::None..etc) - Builder Methods: Provide builder-pattern methods for every css-style property (well, not all them yet! :P). So you don’t need to import so many enum types.
Goal
The goal for this crate is to provide a Style object with builder-pattern
methods to build up a CSS inline-style value, thus can be used with/by other
crates that works with styling HTML tags (such as dioxus, yew,
tinytemplate..etc).
Non-Goal
The Style object is not intended for parsing or retrieving typed values out of
it. Consider using other crate for parsing purpose.
Qucik Example
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);this would print:
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);Re-exports
pub use self::background::Background;pub use self::border::Border;pub use self::box_align::*;pub use self::box_shadow::BoxShadow;pub use self::color::Color;pub use self::color::Opacity;pub use self::cursor::Cursor;pub use self::display::Display;pub use self::flexbox::Basis as FlexBasis;pub use self::flexbox::Direction as FlexDirection;pub use self::flexbox::Grow as FlexGrow;pub use self::flexbox::Order as FlexOrder;pub use self::flexbox::Shrink as FlexShrink;pub use self::flexbox::Wrap as FlexWrap;pub use self::font::Font;pub use self::gap::Gap;pub use self::margin::Margin;pub use self::padding::Padding;pub use self::position::Position;pub use self::size::Size;pub use self::spacing::Spacing;pub use self::style::style;pub use self::style::Style;pub use self::style::StyleUpdater;pub use self::text::Text;pub use self::transition::Transition;pub use self::unit::Unit;pub use self::visibility::Visibility;