Customize your app with CSS styling

Some of the most common styling controls are available as properties on components. However, for ultimate flexibility, you can create custom styles using CSS on all Dynaboard pages and components.

Adding custom CSS

The bottom right Custom Styles panel is available on all Dynaboard pages and components. When expanded, it will look something like this:

element.styles {
}

Here, rou can place arbitrary CSS in the element.styles section, like so:

element.styles {
  /** comments work too */
  background-color: #FFE53B;
  background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
}

Dock the Custom Styles panel to the bottom of the editor by clicking the expand arrows on the right.

Reactive styling with binding expressions

Just like other component properties, you can use binding expressions in your custom styles to make them reactive to user input and other data.

For example, with a Input called countInput, you can change the background color of a Text component based on the value that has been entered:

element.styles {
  color: {{ countInput.value > 42 ? 'green' : 'red' }};
}