Component styles

Component style class
A style class defines values for all the style properties of the component, so switching to a different style class will completely change the way your component looks.
There are predefined style classes for each type of component and you can also create your own new style classes.
component style classes
Component style editor
The component style editor can be accessed via the menu for the style class. In the menu you can also duplicate the style class to create your own new style class for the component.
menu for a style class
In the component style editor you can access all individual style properties for a component, including: 
text color
background color
padding
typography
effects
border
shape
transforms
advanced properties (opacity, backface visibility)
component style editor
Component colors
Many components have one or more color properties, that can be edited in the component style editor.
a Button component with white text color and a blue background color
Semantic colors
Colors in AppGyver are semantic colors. This means they are named after semantic meaning in the current theme, with the actual color values depending on theme and palette in use.
semantic colors
You can find an edit all the palettes in the Theme tab.
theme tab, content palettes and background colors
Custom colors
You can create a new custom palette from the bottom of the semantic color list. This will then allow you specify the custom palette colors for all the possible background colors.
Similarly you are able to create new background colors. In the custom background color view you can see how the background interacts with your content palette.
new smart background color
Using formulas
Colors can be also bound to dynamic sources such as formulas. For foreground color properties you can do this by changing the binding type from the binding icon.
text color bound to formula: R
For background colors you can find the formula binding option in the dialog for defining a new background color.
formula binding in a background color
Component layout options
Adjust component spacing with gaps
Component gap is a new concept that replaces margins. With component gaps the spacing between components is defined as the 'gap' between them. This brings a much more intuitive workflow for component spacing, while still allowing you to customize everything when desired.
The primary gaps define spacing between components in the current main layout direction. The add spacing option provides spacing in the secondary layout direction.
Button with 24px XXL spacing to each direction
Buttons in a horizontal layout with 24px XXL gap between them
Component width and height
In the width and height section you can configure the related behavior for a component.
The options are:
Grow to full width:
component grows to full width it can get
Fit content:
Takes only the space the content needs
Exact size:
define an exact width and height for a component
Custom:
set custom min width and max width behaviour
Advanced:
manually edit shrink, grow and base properties
Component width and height options
Component position
Component position can be adjusted in terms of it's:
self-alignment
relative vs. absolute positioning
z-index (display order when multiple components overlap each other)
​
​