Style Properties
Style properties in React-JUCE generally aim to match the behavior and experience of writing CSS or writing a StyleSheet with React Native. It's important to note, however, that these style properties are not proper CSS, and that we have no notion of parsing CSS stylesheets. In React-JUCE, these properties are simple directives passed to the underlying juce::Component heirarchy that yield behavior that matches much of the CSS specificiation.
At present, these style properties are applied as a top-level prop to any given component, as you would with any other prop. In the future, we may adopt an API closer to that of React Native's StyleSheet.
Property | Support | Spec |
flex | Yes | ​Flexbox​ |
flex-grow | Yes | ​Flexbox​ |
flex-shrink | Yes | ​Flexbox​ |
flex-basis | Yes | ​Flexbox​ |
flex-direction | Yes | ​Flexbox​ |
justify-content | Yes | ​Flexbox​ |
align-items | Yes | ​Flexbox​ |
align-content | Yes | ​Flexbox​ |
align-self | Yes | ​Flexbox​ |
flex-wrap | Yes | ​Flexbox​ |
position | Yes | ​Flexbox​ |
left | Yes | ​Flexbox​ |
top | Yes | ​Flexbox​ |
right | Yes | ​Flexbox​ |
bottom | Yes | ​Flexbox​ |
width | Yes | ​Flexbox​ |
height | Yes | ​Flexbox​ |
min-width | Yes | ​Flexbox​ |
min-height | Yes | ​Flexbox​ |
max-width | Yes | ​Flexbox​ |
max-height | Yes | ​Flexbox​ |
aspect-ratio | Yes | ​Flexbox​ |
direction | Yes | ​Flexbox​ |
overflow | Yes | ​Flexbox​ |
margin | Yes | ​Flexbox​ |
margin-left | Yes | ​Flexbox​ |
margin-top | Yes | ​Flexbox​ |
margin-right | Yes | ​Flexbox​ |
margin-bottom | Yes | ​Flexbox​ |
margin-start | Yes | ​Flexbox​ |
margin-end | Yes | ​Flexbox​ |
margin-horizontal | Yes | ​Flexbox​ |
margin-vertical | Yes | ​Flexbox​ |
padding | Yes | ​Flexbox​ |
padding-left | Yes | ​Flexbox​ |
padding-top | Yes | ​Flexbox​ |
padding-right | Yes | ​Flexbox​ |
padding-bottom | Yes | ​Flexbox​ |
padding-start | Yes | ​Flexbox​ |
padding-end | Yes | ​Flexbox​ |
padding-horizontal | Yes | ​Flexbox​ |
padding-vertical | Yes | ​Flexbox​ |
Property | Support | Spec |
border-left-width | Planned (#143)​ | ​MDN border-width​ |
border-right-width | Planned (#143)​ | ​MDN border-width​ |
border-top-width | Planned (#143)​ | ​MDN border-width​ |
border-bottom-width | Planned (#143)​ | ​MDN border-width​ |
border-left-color | Planned (#143)​ | ​MDN border-color​ |
border-right-color | Planned (#143)​ | ​MDN border-color​ |
border-top-color | Planned (#143)​ | ​MDN border-color​ |
border-bottom-color | Planned (#143)​ | ​MDN border-color​ |
border-bottom-left-radius | Planned (#143)​ | ​MDN border-radius​ |
border-bottom-right-radius | Planned (#143)​ | ​MDN border-radius​ |
border-top-left-radius | Planned (#143)​ | ​MDN border-radius​ |
border-top-right-radius | Planned (#143)​ | ​MDN border-radius​ |
border-width | Planned (#143)​ | ​MDN border-width​ |
border-color | Planned (#143)​ | ​MDN border-color​ |
border-radius | Planned (#143)​ | ​MDN border-radius​ |
background-color | Partial (#84)​ | ​MDN background-color​ |
opacity | Yes |
