undefined
. In most cases, the default value is shown in light gray after erasing any user-inputted values – such as 0
for margin or rgba(255,255,255,0)
for background color.0…255
. The alpha channel value is a decimal between 0…1
.0…f
(single) or 00…ff
(double).#f0f
#rgb
#ff00ff
#rrggbb
rgb(255, 0, 255)
rgb(red, green, blue)
rgb(255,0,255,1.0)
rgb(red, green, blue, alpha)
#f0ff
#rgba
#ff00ffff
#rrggbbaa
0…360
. Saturation and lightness values are between 0%…100%
. Alpha channel value is a decimal between 0…1
.hsl(300, 90%, 80%)
hsl(hue, saturation, lightness)
hsla(300, 70%, 50%, 0.8)
hsla(hue, saturation, lightness, alpha)
flexDirection
)column
row
column-reverse
row-reverse
justifyContent
)flex-start
with horizontal layout direction would cause the children components to be justified horizontally to the left side of the container.flex-start
center
flex-end
space-between
space-around
space-evenly
alignItems
)flex-start
with horizontal layout means Top alignment.flex-start
center
flex-end
stretch
baseline
flexWrap
)false
true
alignContent
)flex-start
with horizontal layout means Top alignment.flex-start
center
flex-end
space-between
space-around
space-evenly
%
) unit is used, the width is calculated as a percentage of the parent container's width.px
and %
for the unit, the programmatic pixel values are given as an integer, without the px
suffix.width
100
90%
height
250
100%
minWidth
160
75%
minHeight
40
25%
maxWidth
40
25%
maxHeight
40
25%
marginTop
, marginBottom
, marginLeft
and marginRight
style properties. Valid values are positive and negative integers.paddingTop
, paddingBottom
, paddingLeft
and paddingRight
style properties. Valid values are positive integers. Negative integers are accepted, but will be treated as 0
.top
, bottom
, left
and right
style properties. Valid values are positive and negative integers.zIndex
)alignSelf
)flexGrow
/flexShrink
/flexBasis
properties directly. You can read more about them on e.g. https://css-tricks.com/snippets/css/a-guide-to-flexbox/.resizeMode
)cover
contain
stretch
repeat
center
left
, center
and right
.fontStyle
)normal
and italic
.fontWeight
)normal
and bold
. If the selected numeric value is not available for the chosen font, the closest one is used.normal
, bold
, 100
, 200
, 300
, 400
, 500
, 600
, 700
, 800
and 900
.fontSize
)lineHeight
)textDecorationLine
)none
, underline
and line-through
.color
)letterSpacing
)solid
, double
, dotted
and dashed
.#rgb
true
or false
. Under the hood, works by setting the shadowOpacity
style property to 1
or 0
.shadowOffset
)shadowOffset
is an object containing width
and height
keys. Valid values are positive and negative integers.shadowOffset
to an object {width: 2, height: -4}
.shadowRadius
)shadowColor
)borderStyle
)unset
solid
dotted
dashed
borderRadius
)borderTopLeftRadius
, borderTopRightRadius
, borderBottomLeftRadius
and borderBottomRightRadius
style properties.borderWidth
)borderTopWidth
, borderRightWidth
, borderBottomWidth
and borderLeftWidth
style properties.borderColor
)transform
)transform
property contains an array of objects whose keys map to the table below. Each property should be set in its own object. For example, to rotate an UI component by 45 degrees and skewing it on the X axis by 1 radian, you would set transform
like this:deg
or rad
.-45deg
, 180deg
, -1rad
or 2.15rad
.perspective
rotate
rotateX
rotateY
rotateZ
scale
1
being no transformation.scaleX
1
being no transformation.scaleY
1
being no transformation.translateX
translateY
opacity
)0…1
, with 1
being fully opaque and 0
being fully transparent.overflow
)visible
hidden
backfaceVisibility
)visible
and hidden
.elevation
)