Properties

Here is a list of all currently supported properties. Note that these are properties which are provived by Bevy ECSS but you can also add your own properties at anytime.

Before reading properties description, we'll use this notation to describe accepted values:

NotationDescription
00.00%Any percent value, like 93% or 4.45%
00.00pxAny dimensional value, like 11px or 0.99px
00.00Any number value, like 0 or 14.2
<ident> | <ident>Only one of the identifiers are allowed, without quotes, like none or hidden
<area-short-hand>Allows the short hand area constructor by using either dimensions or percentage, like 10px or 5% 10px 3% auto. No global values are supported yet

Style properties

PropertyValuesDescription
displayflex | noneApplies the display property on display field of all sections on matched Style components.
position-typeabsolute | relativeApplies the position-type property on position_type field of all sections on matched Style components.
directioninherit | left-to-right | right-to-leftApplies the direction property on direction field of all sections on matched Style components.
flex-directionrow | column | row-reverse | column-reverseApplies the flex-direction property on flex_direction field of all sections on matched Style components.
flex-wrapno-wrap | wrap | wrap-reverseApplies the flex-wrap property on flex_wrap field of all sections on matched Style components.
align-itemsflex-start | flex-end | center | baseline | stretchApplies the align-items property on align_items field of all sections on matched Style components.
align-selfauto | flex-start | flex-end | center | baseline | stretchApplies the align-self property on align_self field of all sections on matched Style components.
align-contentflex-start | flex-end | center | stretch | space-between | space-aroundApplies the align-content property on align_content field of all sections on matched Style components.
justify-contentflex-start | flex-end | center | space-between | space-around | space-evenlyApplies the justify-content property on justify_content field of all sections on matched Style components.
overflow-xvisible | hiddenApplies the overflow-x property on overflow.x field of all sections on matched Style components.
overflow-yvisible | hiddenApplies the overflow-y property on overflow.y field of all sections on matched Style components.
left00.00% | 00.00pxApplies the property on left field of all matched components.
right00.00% | 00.00pxApplies the property on right field of all matched components.
top00.00% | 00.00pxApplies the property on top field of all matched components.
bottom00.00% | 00.00pxApplies the property on bottom field of all matched components.
width00.00% | 00.00pxApplies the property on width field of all matched components.
height00.00% | 00.00pxApplies the property on height field of all matched components.
min-width00.00% | 00.00pxApplies the property on min_width field of all matched components.
min-height00.00% | 00.00pxApplies the property on min_height field of all matched components.
max-width00.00% | 00.00pxApplies the property on max_width field of all matched components.
max-height00.00% | 00.00pxApplies the property on max_height field of all matched components.
flex-basis00.00% | 00.00pxApplies the property on flex_basis field of all matched components.
flex-grow0 | 1 | 2Applies the property on flex_grow field of all matched components.
flex-shrink0 | 1 | 2Applies the property on flex_shrink field of all matched components.
aspect-ratio00.00 | noneApplies the property on aspect_ratio field of all matched components.
margin<area-short-hand>Applies the property on margin field of all matched components.
padding<area-short-hand>Applies the property on padding field of all matched components.
border<area-short-hand>Applies the property on border field of all matched components.
row-gap00.00% | 00.00pxApplies the property on row_gap field of all matched components.
column-gap00.00% | 00.00pxApplies the property on column_gap field of all matched components.

Text properties

PropertyValuesDescription
colornamed-colors | hex_colorsApplies the property on style.color for all sections of matched components.
font"path/to/font.ttf"Applies the property on style.font for all sections of matched components.
font-size00.00Applies the property on style.font_size for all sections of matched components.
text-content"Some text value"Applies the property on value for all sections of matched components.
text-alignleft | center | rightApplies the property on alignment of all matched components.

Components properties

PropertyValuesDescription
background-colornamed-colors | hex_colorsApplies the property on BackgroundColor of all matched components.
border-colornamed-colors | hex_colorsApplies the property on BorderColor of all matched components.

Image properties

PropertyValuesDescription
image-path"path/to/image.png"Applies the property on image.texture for all images of matched components.