Component properties

Component properties provide a way to customize individual UI components added to a view. Select a UI component in the view tree or on the canvas to display the component properties. The properties pane is split into four sections:

• Component properties

• Style properties

• Conditional style properties

• Motion properties

When a responsive strategy has been selected you can override component properties at different breakpoints.

Component properties

Component properties provide general configuration options for the component. They are primarily specific to the component and described for each component under UI components.

There are also some general properties applicable to all or many components. The Visible, Read Only, and Disabled properties are boolean properties. Boolean properties can be bound to a property, condition, or function, and can also be explicitly set to true or false. Explicitly setting a value can be a useful tool during development.

Property	Description
Name	Displayed in the view tree and on the canvas when the component is selected. By default the name is set to the name of the UI component. The name can also be changed by selecting the component and pressing Cmd/Ctrl + R or by right-clicking the component in the view tree and selecting Rename.
Visible	Display the component. Defaults to true. If explicitly set to false, the component will not be shown on the cavas and will be marked with an icon in the view tree.
Read Only	Available for data input components. If true, the user cannot edit the input. A readonly HTML attribute is applied to the element.
Disabled	Available for data input components. If true, the user cannot edit or focus the input. A disabled HTML attribute is applied to the element. The value and label is displayed using the color specified under Disabled Text in the active theme.

Good to know

What's the difference between Read Only and Disabled?

A read-only component looks like a fully-functional component, it is focusable and the value can be selected. A disabled component is visually distinct, is not focusable, and the value is not able to be selected.

Style properties

Style properties allow you to customize the appearance of a component. These properties are translated to corresponding CSS properties when the app is loaded. The exact properties available for a component are dependent on the component's type.

Best practice

To keep your UI consistent and maintainable try to avoid overriding too many values that are set in the theme, such as font styles.

Units

For property values that have a unit, the default is pixels (px). To change the unit, click on the unit name next to the property value to open a drop down with a list of options. The available units will depend on the property, but they include:

• px

• %

• em

• rem

• vh

• vw

• auto

• – (unitless)

Linked values

Some properties that accept multiple values, such as Margin, Padding, and Border, can be set once and applied to all other values. This can be identified by the link icon. Click the link icon to link the values and enter a single value in the remaining editable field.

Typography

Override any default typography values or properties set under Component properties.

Property	Description
Font Family	Set a font family added to the active theme.
Font Weight	Set the weight (boldness) of the font. The weights available depend on the active Font Family.
Color	Set a color from the active theme.
Size	Set the size of the font.
Line Height	Set the height of a line of text. Often used to set the distance between multiple lines of text.
Letter Spacing	Set the horizontal spacing between each character. Can be positive or negative.
Text Align	Set the horizontal alignment of the text inside its container. Left (default) Center Right Justify
Style	Set the font style. Normal (default) Italic
Decoration	Apply decorative lines to the text. None (default) Underline Overline Line Through
Transform	Set capitalization of the text. Note: This property only affects the display of the text and not the value in the data source. None (default) Uppercase Capitalize Lowercase
Text Orientation	Set the orientation of the text in a line. Horizontal (default) Vertical
White Space	Specify how white space and line breaks are treated. To preserve line breaks in your text, choose a Pre option or Break Spaces. Normal: Default. Collapse sequences of white space. New line characters are handled the same as other white space. Wrap lines as necessary after a line is filled. Nowrap: Collapse sequences of white space but never wrap lines. Pre: Preserve sequences of white space. Wrap lines at newline characters. Pre Wrap: Preserve sequences of white space. Wrap lines at newline characters and as necessary after a line is filled. Pre Line: Collapse sequences of white space. Wrap lines at newline characters and as necessary after a line is filled. Break Spaces: Identical to Pre Wrap except that: Any sequence of preserved white space always takes up space, including at the end of the line. A line breaking opportunity exists after every preserved white space character, including between white space characters.
Overflow Wrap	Specify whether line breaks should be inserted within otherwise unbreakable text to prevent text from overflowing its parent container. Unlike Word Break, a break will only be created if an entire word cannot be placed on its own line without overflowing. Normal: Default. Break lines only at normal word break points, such as a space between two words. Break Word: Allow otherwise unbreakable text, such as long words or URLs, to be broken at any point to prevent overflowing.
Word Break	Specify whether line breaks appear wherever the text would otherwise overflow its parent container. Overflow Wrap should be preferred over Word Break in most cases. Normal: Default. Use the default line break rule. Break All: Insert word breaks between any two characters at the exact place text would otherwise overflow its container, even if putting an entire word on its own line would negate the need for a break.

Flex child

Available when a component is a child of a component with the Display property set to Flex.

Property	Description
Alignment	Override the value set for Align Items in the parent component to align the item in the cross axis.
Sizing	Specify how the component will grow or shrink according to the space available in the parent component. Stretch: Stretch to take up a portion of the excess space depending on siblings. Shrink: Default. Shrink to fit in the available space. No Shrink: Retain original size regardless of available space. Advanced: Specify individual grow, shrink and basis values. Flex Grow: Set the grow factor. Flex Shrink: Set the shrink factor. Flex Basis: Set the initial main size of the component.

Layout

Control how the component behaves in the flow layout and the layout of its children. For a guide to building Flex layouts, see How to use Flexbox.

Property

Description

Display

Specify how a component behaves in the flow layout. Block: Default. Display the component on a new line unless inside a component with Display Flex. Flex: Behave like Block and display children according to the Flex properties. Inline Block: Behave like Inline, but respect height and width values. Inline: Display the component without adding a new line before or after. Consecutive components with this value will be displayed on the same line provided there is space available. Height and width values have no effect. None: Do not display the component. The layout will act as though the component does not exist. This value can be used to toggle visibility for different screen sizes. To permanently hide a component, set the Visible property to false instead of using this property.

Flex

Property	Description
Layout Direction	Specify the axis and direction for the placement of child components. Horizontal: Place children from left to right. Vertical: Place children from top to bottom. Horizontal Reversed: Place children from right to left. Vertical Reversed: Place children from bottom to top.
Justify Content	Control how space is distributed between and around child components along the main axis. Start: Line up children flush to each other against the start edge of the container. Center: Line up children flush to each other in the center of the container. End: Line up children flush to each other against the end edge of the container. Space Between: Distribute the children evenly within the container with the the first child against the start edge and the last child against the end edge. There is equal spacing between each child. Space Around: Distribute the children evenly within the container with equal spacing between each child. There is space between the start edge and first child, and end edge and last child, that is equal to half the space between two children.
Align Items	Control how child components are aligned in the cross axis (the opposite of the main axis). Start: Align children to the start edge of the cross axis. Center: Align children to the center of the cross axis. End: Align children to the end edge of the cross axis. Stretch: Stretch children to be the same size as the cross axis. Width and height values are respected.
Child Wrap	Control if child components can wrap and if so, how. No Wrap: Default. Lay out children on one line. The container may overflow. Wrap: Wrap children over multiple lines as required. Wrap Reverse: Reverse the order of the children and wrap them over multiple lines as required.

Spacing

Control the empty space around the outside of a component (margin) and between the edge of the component and it's contents (padding).

Property	Description
Margin	Specify the empty space to the top, right, bottom, and left of a component.
Padding	Specify the empty space to the top, right, bottom, and left between the edge of the component (the inside of the border, if present) and the contents of the component.

Size

Control the size of a component. All of these properties default to auto which leaves it up to the browser to calculate and set a value.

Property	Description
Width	Set the width of the component. This value can be data bound or set by a function.
Min Width	Set a minimum width for the component. This value will be used as the width of the component if it is larger than Max Width or Width.
Max Width	Set a maximum width for the component. This value will be used as the width of the component if is smaller than Width.
Height	Set the height of the component. This value can be data bound or set by a function.
Min Height	Set a minimum height for the component. This value will be used as the height of the component if it is larger than Max Height or Height.
Max Height	Set a maximum height for the component. This value will be used as the height of the component if is smaller than Height.

Overflow

Control the behavior of content that exceeds the size of it's containing component.

Property	Description
Horizontal	Apply decorative lines to the text. Visible: Default. Display content even if it overflows the container. Hidden: Hide content if it overflows the container. Auto: Automatically add scrollbars to the container if content overflows and contain the content within the container. Scroll: Permanently add scrollbars to the container whether or not content overflows and contain the content within the container.
Vertical	As for horizontal, but along the opposite axis.

Positioning

Property	Description
Position	Specify how a component should be positioned in the layout. All of the options are Static: The component is positioned according to the normal flow of the layout. Offset and Z-index are not available. Relative: Default. The component is positioned according to the normal flow of the layout and then offset relative to itself according to any values set for Offset. Absolute: The component is not part of the normal layout flow and no space is created for the component. It is positioned relative to its closest ancestor with any Position except Static. Positioning within the ancestor can be set using Offset. Sticky: The component is positioned according to the normal flow of the layout and then offset relative to its nearest scrolling ancestor based on any values set for Offset. Fixed: The component is removed from the normal layout flow and no space is created for the component. It is positioned relative to the viewport.
Offset	Specify the top, right, bottom, and left position of a component. Often used in conjunction with Position Absolute to position a component within a container. These values can be data bound or set by a function.
Z-index	Set the order of the component when stacked with other components. A higher number will place a component higher in the stack. Overlapping components with a larger z-index cover those with a smaller one.

Input typography

Available for Text edit and Rich text editor.

Style the text value of a component.

Property	Description
Variant	Apply a typography variant from the active theme.
Font Family	Set a font family added to the active theme.
Font Weight	Set the weight (boldness) of the font. The weights available depend on the active Font Family.
Color	Assign a color from the active theme.
Size	Set the size of the font.
Text Align	Set the horizontal alignment of the text. Left (default) Center Right Justify
Style	Set the font style to either Normal (default) or Italic.
Decoration	Apply decorative lines to the text. None (default) Underline Overline Line Through
Transform	Specify capitalization of the text. Note: This property only affects the display of the text and not the value in the data source. None (default) Uppercase Capitalize Lowercase

Background

Available for Containers.

Add a simple background color or add one or more background layers to a container.

Property	Description
Backgrounds	Add one or more background layers.
Background Color	Assign a color from the active theme.
Color	Assign a default color from the active theme for the content in the container.

Multiple background layers are placed on top of each other with the first background in the list on top. Drag and drop a background to rearrange it in the order. A background can be an image, a linear gradient, a radial gradient, or a color overlay.

Image

Property	Description
Image	The image file to apply as the background.
Size	How the image should be sized. Cover: Scale the image while preserving its ratio to completely fill the container. If the proportions of the image and the container differ, the image will be cropped. Contain: Scale the image as large as possible to fit in the container without cropping or stretching. If there is space remaining in the container, the image will be tiled according to the value set for Repeat. Auto: Render the image at its intrinsic dimensions.
Position	The initial position of the image relative to the container.
Repeat	Tile the image within the container. The tiling will be based around the Position value. No Repeat: Do not tile the image. Horizontally & Vertically Horizontally Vertically

Linear gradient

A linear gradient creates a band of colors that progress in a straight line. For more information on linear gradients see Using CSS gradients on MDN.

Property	Description
Angle	The direction in which the gradient runs, in degrees. Defaults to 180 which is from top to bottom.
Color Stops	Edit and add color stops to determine the colors in the gradient. Defaults to two stops from solid black to transparent. To edit an existing stop, click it to change the color and opacity. Drag the stop along the bar to change its position. To add a new stop, click an empty space along the bar.

Radial gradient

A radial gradient creates a band of colors that radiate out from a central point. For more information on linear gradients see Using CSS gradients on MDN.

Property	Description
Color Stops	Edit and add color stops to determine the colors in the gradient. Defaults to two stops from solid black to transparent. To edit an existing stop, click it to change the color and opacity. Drag the stop along the bar to change its position. To add a new stop, click an empty space along the bar.

Color overlay

A uniform color that covers the entire container.

Property	Description
Overlay Color	Assign a color from the active theme or create a custom color in the color picker.

Borders

Add a border to one or more edges of the component.

Good to know

If content within a component with a Border Radius flows outside the edge of the border, consider setting Overflow to Hidden on the containing component.

Property	Description
Border	The width of the border.
Color and Style	Assign a color from the active theme (Divider is recommended) and set a border style. None (applies a Border of 0) Solid Dotted Dashed Double
Border Radius	Round the corners of the border.
Use Border Radius from Theme	Apply the border radius from the active theme.

Outline

Add a line outside of the component's border. Unlike borders, outlines don't take up space and affect the layout of the view.

Outline is often used to make apps more accessible for users navigating with the keyboard. It can be used to indicate focus on an component in conjunction with the Focus Visible event in Conditional styles. For example, it can be used on containers with an On Click event.

Property	Description
Style	The style of the outline. None (applies a Width of 0) Solid Dotted Dashed Double
Color	Assign a color from the default theme.
Width	The thickness of the outline. Defaults to a value that is usually equivalent to 3 px in desktop browsers.
Offset	The space between the outline and the edge or border of the component.

d

Custom color

Available for Icon button, Icon and Avatar.

Property	Description
Color/Icon Color	Assign an icon color from the default theme.
Background Color	Assign a background color for avatars from the default theme.

Effects and transitions

Property	Description
Opacity	The degree to which content behind a component is hidden. The opposite of transparency. Defaults to 100%.
Transitions	Add transitions to create smooth animations between styling values.
Transforms	Add transforms to visually manipulate a component by skewing, rotating, moving, or scaling.

Transitions

With a transition you can control the speed of the animation as styling values change, such as when conditional styles are applied. For more background information on how transitions work see Using CSS transitions on MDN.

Property	Description
Property	The style property to apply the transition to. Defaults to All properties.
Duration	The length of the animation. Defaults to Standard. Shortest: 150 ms Shorter: 200 ms Short: 250 ms Standard: 300 ms Complex: 375 ms Custom (in milliseconds)
Timing	The acceleration curve for the animation. Defaults to Ease In Ease Out. Ease In Ease Out: Accelerate quickly before slowing down until complete. Ease Out: Accelerate quickly and decrease speed slowly until complete. Ease In: Accelerate slowly and increase speed quickly until complete. Sharp: Accelerate slowly, speed up, and slow down until complete.
Delay	The length of time to wait after the property is changed before starting the animation. Defaults to None. Shortest: 150 ms Shorter: 200 ms Short: 250 ms Standard: 300 ms Complex: 375 ms Custom (in milliseconds)

Transforms

Transforms change the position and shape of a component. For more background information on how transforms work see Using CSS transforms on MDN.

Property	Description
Type	The transform to apply. Rotate: Rotate the component clockwise. Scale: Change the size of the component relative to the original size. Move: Move the component vertically and/or horizontally (also known as translate). Skew: Skew the component vertically and/or horizontally.
Rotate	Available for Type Rotate. The number of degrees to rotate the component.
Scale	Available for Type Scale. The ratio to scale the component. For example, a value of 0.5 will halve the size of the component, while 2 will double the size.
Move X	Available for Type Move. The number of pixels to move the component along the X-axis. Use negative values to move to the left of the origin.
Move Y	Available for Type Move. The number of pixels to move the component along the Y-axis. Use negative values to move to above the origin.

Conditional style properties

A conditional style overrides one or more style properties on a component based on an event, a condition, or a combination. For example, you can change the elevation of a container on hover, or change the color of text based on the value of a status property.

Multiple conditional styles can be added to a component and they will be applied in the order they are listed in Appfarm Create, from top to bottom. When a conditional style is expanded, the changes that would be applied will be previewed on the canvas.

Examples

Conditional style examples are available in our Showroom. You can view the demos, as well as access the setup in Appfarm Create. Don't have access? Register.

Property	Description
Name	Set a descriptive name for the conditional style.
Event	Optional. Apply the Style Overrides when this event occurs and Enabled is true: Hover: Triggered when the user hovers over the component with the cursor (mouse pointer). Active: Trigged when the component is activated by the user, typically when pressing down the mouse button. Focus: For input components, use Focus Within. Triggered when the user clicks or taps on the component, or selects it with the Tab key. Focus Visible: Triggered when the component has focus, and the browser determines via heuristics that the focus should be indicated. This is often used when you want to indicate focus on a component from keyboard input but not mouse input. Focus Within: Triggered when the component, or any of its child components, receive focus. Use this option for styling input components based on focus.
Enabled	A boolean property that determines if the conditional style should be applied. This value must be true for a style to be applied. If an Event is chosen, this defaults to true. A value can optionally be bound to combine with the event. If an Event is not chosen, this value alone determines if the conditional style is applied.
Style Overrides	Add one or more style overrides. The styles that can be overridden are determined by the component type.

Examples

Change background color on hover

You have a Container component and you'd like to change the background color on hover.

Select the container and add a new conditional style:

• Event: Hover

• Style Overrides: Background Color = Secondary

Change text color according to property value

You have a Text component bound to Order.State. The text should be green when State = Active.

Select the component and add a new conditional style:

• Enabled (condition): Order.State EQUALS Active

• Style Overrides: Typography Color = Green

Motion properties

A motion is a transition that can be applied to animate a component. Only one motion per component is supported. A component with a motion is marked with an icon in the view tree. Motions are most commonly applied to containers.

When a motion is added to a component, the component will be displayed on the canvas, but will not be displayed in the app until the Motion In property is true. When that occurs, the animation will run and the component will be displayed. The exception is for Rotate motions, which are always visible.

For example, you can add a Collapse motion on a container, and create a condition on Motion In that determines when the container should be animated into view.

As opposed to conditional styles, where you can create custom transitions and transforms to animate a component between styling properties, motions are made with pre-defined transitions.

Examples

Motion examples are available in our Showroom. You can view the demos, as well as access the setup in Appfarm Create. Don't have access? Register.

Property	Description
Type	The type of transition to perform: Collapse: Expand into view and collapse out of view. Fade: Fade from transparent. Grow: Expand outwards from the center and fade from transparent. Rotate: Rotate according to the number defined in Rotate Degrees. The component will always be visible. Slide: Slide from the edge of the screen in the selected Direction. Zoom: Expand outwards from the center.
Motion In	The component will become visible when this value is true. If Type is Rotate, the component will rotate.
Keep Mounted	Available when Type is Collapse. Hide content instead of removing it when Motion In is false. When using this option, be aware that: It may lead to decreased performance if used with large amounts of data. Auto-focus will not trigger on a Text edit component when it becomes visible. Use cases: To fix the lag in the expand animation because of content with dynamic height such as rich text. Child components included in a tab index also while hidden.
Rotate Degrees	Available when Type is Rotate. The number of degrees to rotate the component.
Direction	Available when Type is Slide. The direction in which the component should slide, either Left, Right, Up, or Down.