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)
Last modified 2mo ago