Component properties
Last updated
Was this helpful?
Last updated
Was this helpful?
Component properties provide a way to customize individual added to a . Select a UI component in the or on the to display the component properties. The properties pane is split into four sections:
When a has been selected you can override component properties at different breakpoints.
Component properties provide general configuration options for the component. They are primarily specific to the component and described for each component under .
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 , , or , and can also be explicitly set to true or false. Explicitly setting a value can be a useful tool during development.
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
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
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)
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.
Font Family
Font Weight
Set the weight (boldness) of the font. The weights available depend on the active Font Family.
Color
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.
Available when a component is a child of a component with the Display property set to Flex.
Alignment
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.
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.
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.
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.
Control the empty space around the outside of a component (margin) and between the edge of the component and it's contents (padding).
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.
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.
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.
Control the behavior of content that exceeds the size of it's containing component.
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.
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.
Style the text value of a component.
Variant
Font Family
Font Weight
Set the weight (boldness) of the font. The weights available depend on the active Font Family.
Color
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
Add a simple background color or add one or more background layers to a container.
Backgrounds
Background Color
Color
Assign a default color from the active theme for the content in the container.
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
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.
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.
A uniform color that covers the entire container.
Overlay Color
Add a border to one or more edges of the component.
Border
The width of the border.
Color and Style
None (applies a Border of 0)
Solid
Dotted
Dashed
Double
Border Radius
Round the corners of the border.
Use Border Radius from Theme
Add a line outside of the component's border. Unlike borders, outlines don't take up space and affect the layout of the view.
Style
The style of the outline.
None (applies a Width of 0)
Solid
Dotted
Dashed
Double
Color
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
Available for Icon button, Icon and Avatar.
Color/Icon Color
Background Color
Assign a background color for avatars from the default theme.
Opacity
The degree to which content behind a component is hidden. The opposite of transparency. Defaults to 100%.
Transitions
Transforms
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)
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.
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.
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.
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
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.
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.
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 in the active theme.
To keep your UI consistent and maintainable try to avoid overriding too many values that are set in the , such as font styles.
Override any default typography values or properties set under .
Set a added to the active theme.
Set a from the active theme.
Override the value set for Align Items in the to align the item in the cross axis.
Flex Grow: Set the .
Flex Shrink: Set the .
Flex Basis: Set the of the component.
Control how the component behaves in the flow layout and the layout of its children. For a guide to building Flex layouts, see .
Flex: Behave like Block and display children according to the .
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 . To permanently hide a component, set the to false instead of using this property.
Available for Text edit and .
Apply a from the active theme.
Set a added to the active theme.
Assign a from the active theme.
Available for .
Add one or more .
Assign a color from the active .
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 , a , a , or a .
A linear gradient creates a band of colors that progress in a straight line. For more information on linear gradients see .
A radial gradient creates a band of colors that radiate out from a central point. For more information on linear gradients see .
Assign a color from the active or create a custom color in the color picker.
Assign a color from the active (Divider is recommended) and set a border style.
Apply the from the active theme.
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 . For example, it can be used on with an On Click event.
Assign a color from the default .
Assign an icon from the default theme.
Add to create smooth animations between styling values.
Add to visually manipulate a component by skewing, rotating, moving, or scaling.
With a transition you can control the speed of the animation as styling values change, such as when are applied. For more background information on how transitions work see .
Transforms change the position and shape of a component. For more background information on how transforms work see .
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 .
Conditional style examples are available in our . You can view the demos, as well as access the setup in Appfarm Create. Don't have access? .
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 .
As opposed to , where you can create custom transitions and transforms to animate a component between styling properties, motions are made with pre-defined transitions.
Motion examples are available in our . You can view the demos, as well as access the setup in Appfarm Create. Don't have access? .