Crate css_style[−][src]
This crate provides you a typed CSS style with builder-style methods.
NOTE: css-style is not (yet) prodction ready but is good for use in side projects and internal tools.
Features
- Typed CSS Values: CSS units and valuse are all typed (.e.g
Length
,Px
,css::None
..etc) - Builder Methods: Provide bulder-pattern methods for every css-style property. (well, not all them yet! :P)
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 yew
, seed
,
tinytemplate
..etc).
Non-Goal
The Style
object is not intended for parsing or retrieving typed values out of
it. Conisder using other crate for parsing purpose.
Qucik Example
use css_style::{Style, Color, unit::{ms, px}}; let style = Style::default() .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::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::css_values as css; |
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::style::Style; |
pub use self::style::StyleUpdater; |
pub use self::text::Text; |
pub use self::transition::Transition; |
pub use self::visibility::Visibility; |
Modules
background | |
border | |
box_align | |
box_shadow | |
calc | |
color | |
css_values | |
cursor | |
display | |
flexbox | |
font | |
gap | |
margin | |
padding | |
position | |
prelude | |
size | |
style | |
text | |
transition | |
unit | |
visibility |