r
r
react-juce
Search
K

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.

Layout Props

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

View Props

Property
Support
Spec
border-left-width
Planned (#143)
border-right-width
Planned (#143)
border-top-width
Planned (#143)
border-bottom-width
Planned (#143)
border-left-color
Planned (#143)
border-right-color
Planned (#143)
border-top-color
Planned (#143)
border-bottom-color
Planned (#143)
border-bottom-left-radius
Planned (#143)
border-bottom-right-radius
Planned (#143)
border-top-left-radius
Planned (#143)
border-top-right-radius
Planned (#143)
border-width
Planned (#143)
border-color
Planned (#143)
border-radius
Planned (#143)
background-color
Partial (#84)
opacity
Yes