Styling

Stlying lets us add properties to our widgets that change their visual appearance. Technically, layout propeties fall under styling as well, but for simplicity in learning the layout properties are detailed in a separate section of the book.

Available Properties

The table below shows the list of available style properties (layout properties are not shown for brevity). The property names are as they would appear in a css stylesheet. The property names in Rust are the same except dashes are replaced with underscores. For example, background-color in css becomes background_color in Rust.

PropertyValue TypeDefault ValueAnimatable
displayNone | FlexFlexNo
visibilityVisible | InvisibleVisibleNo
opacityf32 (0.0 - 1.0)1.0Yes
border-widthUnitsUnits::AutoYes
border-colorColorColor::rgba(0,0,0,0)Yes
border-radiusUnitsUnits::AutoYes
border-radius-top-leftUnitsUnits::AutoYes
border-radius-top-rightUnitsUnits::AutoYes
border-radius-bottom-leftUnitsUnits::AutoYes
border-radius-bottom-rightUnitsUnits::AutoYes
background-colorColorColor::rgba(0,0,0,0)Yes
background-gradientLinearGradientNo
background-imageTODONo
fontStringNo
colorColorColor::black()Yes
font-sizef3214.0Yes
outer_shadow_h_offsetUnitsUnits::AutoYes
outer_shadow_v_offsetUnitsUnits::AutoYes
outer_shadow_blurUnitsUnits::AutoYes
outer_shadow_colorColorColor::rgba(0,0,0,0)Yes
inner_shadow_h_offsetUnitsUnits::AutoYes
inner_shadow_v_offsetUnitsUnits::AutoYes
inner_shadow_blurUnitsUnits::AutoYes
inner_shadow_colorColorColor::rgba(0,0,0,0)Yes