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 | |
flex-grow | Yes | |
flex-shrink | Yes | |
flex-basis | Yes | |
flex-direction | Yes | |
justify-content | Yes | |
align-items | Yes | |
align-content | Yes | |
align-self | Yes | |
flex-wrap | Yes | |
position | Yes | |
left | Yes | |
top | Yes | |
right | Yes | |
bottom | Yes | |
width | Yes | |
height | Yes | |
min-width | Yes | |
min-height | Yes | |
max-width | Yes | |
max-height | Yes | |
aspect-ratio | Yes | |
direction | Yes | |
overflow | Yes | |
margin | Yes | |
margin-left | Yes | |
margin-top | Yes | |
margin-right | Yes | |
margin-bottom | Yes | |
margin-start | Yes | |
margin-end | Yes | |
margin-horizontal | Yes | |
margin-vertical | Yes | |
padding | Yes | |
padding-left | Yes | |
padding-top | Yes | |
padding-right | Yes | |
padding-bottom | Yes | |
padding-start | Yes | |
padding-end | Yes | |
padding-horizontal | Yes | |
padding-vertical | Yes |
Property | Support | Spec |
border-left-width | ||
border-right-width | ||
border-top-width | ||
border-bottom-width | ||
border-left-color | ||
border-right-color | ||
border-top-color | ||
border-bottom-color | ||
border-bottom-left-radius | ||
border-bottom-right-radius | ||
border-top-left-radius | ||
border-top-right-radius | ||
border-width | ||
border-color | ||
border-radius | ||
background-color | ||
opacity | Yes |
Last modified 2yr ago