Customize your app with CSS styling
In this guide, you'll learn how to customize the look-and-feel of your application using custom CSS styles.
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' }};
}