Skip to content

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 SourceSansSerif, OpenSans, NotoSansJP, MochiyPopOne, Lato, RecoletaAltSemiBold, GothamBold, GothamBook
transform transform object
backgroundImage image url
backgroundImageFit cover, contain, fill, fitWidth, fitHeight
backgroundImageAlignment center, centerLeft, centerRight, topRight, topCenter, ...
alignment topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight

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"
  }
}