Styles

The Styles menu enables you to configure the visual properties of your application and components. Each component's style configuration determines how it appears in your application UI.
This page provides an overview of the following topics:
​Access the Styles menu​
​Style properties​
Access the Styles configuration menu
You can access the Styles menu through the:
​Inspector panel​
​Quick Selection menu​
Inspector panel
The Inspector panel contains configuration options for components and pages in your application. When you select a component in the Design view, the Inspector panel appears on the right side of the screen.
To configure style properties from the Inspector panel:
1.Click the component or page you want to style. This opens the Inspector panel.
2.Click the Styles tab in the Inspector panel. Ensure the top of the Inspector panel displays the component you want to style.
3.Select a property and configure the style as needed. For more details on available style settings, see Style properties.
Quick selection menu
The quick selection menu is a floating toolbar that provides quick access to a selected component's configuration options.
To configure the style of a component using the quick selection menu:
1.Click the component you want to style. The quick selection menu appears over the component.
2.Click the palette icon to load a list of style properties.
3.Select a property and configure the style as needed. For more details on available style settings, see Style properties.
Style properties
This table includes descriptions of the most common Styles properties:
Note: This list is not exhaustive. Each component has a unique set of styles available for configuration.
Property
Description
Image
Variants
Enables you to edit the styles of components when they're in different states. For example, you can use this property to change the color of a button when a user hovers over it.

Click True > Focus to edit the component style when the page loads and True > Hover to edit the component style when you hover over the component.
​
​
Display
Enables you to dynamically display or hide components in your UI.
​
​
Size
Enables you to adjust the height, width, and size limitations of a component. To set the component size, choose one of the following icons:

- Hug icon: Matches the component size to the size of its content.
- Fill icon: Sets the size of the component to the size of its parent.
- Fix icon: Sets the component size to the height and width you specify.
​
​
Position
Enables you to adjust the position of the component using the following Mode properties:

- Auto: Positions the component in a the center of the page.
- Free: Places the component in a free position, relative to its parent.
- Fixed: Places the component in the position you specify.
​
​
Padding
Enables you to set the space between a component's content and its border.
​
​
Layout
Enables you to adjust the layout of the components. There are three main layout options:

- Mode: Determines how new components are arranged in your application.
- Alignment: Determines how components are aligned within the parent.
- Spacing: Defines the space between components.

For more information, see the Layout page.
​
​
Background
Enables you to change the background color of the component. The default is transparent.
​
​
Border
Enables you to style component borders.

Note: The border is not visible until you set the Width property.
​
​
Font Styles
Enables you to configure the following font settings:

- Color
- Family
- Size
- Font Variant
- Letter Spacing
- Line Height
​
​
Drop Shadow
Enables you to add drop shadows to the component.

Note: When you add more than one drop shadow, they layer on top of each other.
​
​
Transforms
Enables you to apply the following settings to a component:

- Rotate: Turns the selected component.
- Move: Adjusts the selected component's position.
- Skew: Tilts the selected component.
- Scale: Stretches the selected component.
​
​
Transitions
Enables you to add transitions to your components.
​
​
Filters
Enables you to add the following filters to your components and application background:

- Blur
- Brightness
- Contrast
- Hue Rotate
- Saturation
- Grayscale
- Invert
- Sepia

For more information, see the Use visual filters page.
​
​

Property	Description	Image
Variants	Enables you to edit the styles of components when they're in different states. For example, you can use this property to change the color of a button when a user hovers over it. Click True > Focus to edit the component style when the page loads and True > Hover to edit the component style when you hover over the component.
Display	Enables you to dynamically display or hide components in your UI.
Size	Enables you to adjust the height, width, and size limitations of a component. To set the component size, choose one of the following icons: - Hug icon: Matches the component size to the size of its content. - Fill icon: Sets the size of the component to the size of its parent. - Fix icon: Sets the component size to the height and width you specify.
Position	Enables you to adjust the position of the component using the following Mode properties: - Auto: Positions the component in a the center of the page. - Free: Places the component in a free position, relative to its parent. - Fixed: Places the component in the position you specify.
Padding	Enables you to set the space between a component's content and its border.
Layout	Enables you to adjust the layout of the components. There are three main layout options: - Mode: Determines how new components are arranged in your application. - Alignment: Determines how components are aligned within the parent. - Spacing: Defines the space between components. For more information, see the Layout page.
Background	Enables you to change the background color of the component. The default is transparent.
Border	Enables you to style component borders. Note: The border is not visible until you set the Width property.
Font Styles	Enables you to configure the following font settings: - Color - Family - Size - Font Variant - Letter Spacing - Line Height
Drop Shadow	Enables you to add drop shadows to the component. Note: When you add more than one drop shadow, they layer on top of each other.
Transforms	Enables you to apply the following settings to a component: - Rotate: Turns the selected component. - Move: Adjusts the selected component's position. - Skew: Tilts the selected component. - Scale: Stretches the selected component.
Transitions	Enables you to add transitions to your components.
Filters	Enables you to add the following filters to your components and application background: - Blur - Brightness - Contrast - Hue Rotate - Saturation - Grayscale - Invert - Sepia For more information, see the Use visual filters page.

Last modified 6d ago