Skip to content

Styling and animations

Where styling is supported it can be applied using the following syntax. Placement of these attributes varies by component. There will always be a root object to apply styles animations to. There will be additional elements based on the component.

Example 

"styles": {
  "root": {
    "color": "red"
  },
  "example": {
    "backgroundColor": "yellow"
  }
},
"classes": {
  "root": "border text-danger",
  "example": "text-muted"
},
"animation": {
  "root": {
    "entry": "fadeInRight",
    "duration": "400ms"
  }
},
"rules": [
  {
    "condition": "date(values.date) is past",
    "path": "root.backgroundColor",
    "value": "#1e509c"
  }
]

Styles

Most CSS styles are supported however they may be overriden by the components and support may vary by platform. Style names should be camel-cased so that background-color is written as backgroundColor.

Common styles:

  • color, backgroundColor, fontSize

MDN CSS reference

Classes

Common classes to apply:

  • text-danger, text-warning, text-muted
  • rounded, rounded-circle
  • shadow, shadow-sm, shadow-none

Bootstrap utility classes

Animations

Animations are currently only supported on entry.

Example animations: - fadeIn, flipInX, bounceIn

Animations available

Rules

Conditional style rules 

"rules": [
    {
      "condition": "date(values.date) is past",
      "path": "root.backgroundColor",
      "value": "#1e509c"
    },
    {
      "condition": "date(values.date) is future",
      "path": "root.backgroundColor",
      "value": "#e329da"
    },
    {
      "condition": "date(values.date) is today",
      "path": "root.backgroundColor",
      "value": "#159be3"
    }
  ]