Styles

Style unit

Style units can be numeric or string. If numeric it will be measured as pixels. Otherwise, specify unit in a string, e.g. 100px, or 1.5em, etc.

Styles object

Styles to be applied to the object and/or children. Local styles will override any global styles. Some tile will not used some of the styles as it would caused a redundancy.

Name	Description
height	height in pixel for the object, e.g. "height": "100px", if there's platform specific, add platform suffix, e.g. "height-css": "100vh"
width	height in pixel for the object, e.g. "height": "100px"
color	color
margin	margin, subset of css (top right bottom left), e.g 10px 5px 10px 5px
padding	padding, subset of css (top right bottom left)
padding[Location]	paddingTop, paddingRight, etc.
margin[Location]	marginTop, marginRight, etc.
border	border, subset of css, e.g. "border": "1px solid #ff0000" or "border": "solid"
borderLeft, borderRight, ...	side specific border
borderRadius	radi for the border, e.g. "borderRadius": "10px" or "borderRadius": "10px 25px" or "borderRadius": "10px 25px 10px 25px". See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
backgroundColor	background color
fontSize	Font size
fontFamily	Font size
transform	transform object
backgroundImage	image url
backgroundImageFit	cover, contain, fill, fitWidth, fitHeight
backgroundImageAlignment	center, centerLeft, centerRight, topRight, topCenter, ...

Transform objects

• kind: translate, rotationX, rotationY, skewX, skewY
• translate = x, y, z
• rotationX, rotationY = radians
• skew, skewX, skewY = alpha, beta

Style example

{  
  "styles": {
    "root": {
      "backgroundColor": "#fff"
    },
    "element1": {
      "boder": "1px solid #ddd"
    }
  },
  "classes": {
    "root": "text-left"
  }
}