Links

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:
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.

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
Change text color according to property value
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
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.
Last modified 27d ago