Components are the fundamental building blocks that constitute your application's user interface. These modular elements allow you to construct rich and dynamic interfaces by combining various functionalities and visual elements.
Components are conveniently accessible from the left side panel in the Components tab section. This panel serves as a hub where you can explore and select the components you need to design your application's interface.
Incorporating components into your webform is a straightforward process that involves drag-and-drop functionality. Simply select a component and place it onto your working area or canvas.
You have the flexibility to drop components directly onto the webform itself, as well as within other components that accept nested elements. This versatility allows you to construct complex layouts and hierarchies by combining different components within one another.
|Move||Reposition the selected component on the canvas.|
|Select Parent Component||Select the parent component of the current selection.|
|Delete Component||Remove the selected component from the canvas. As an alternative solution, you can use the shortcut Alt + Shift + Delete (⌥ + ⇧ + Delete for Mac).|
|Export Styles||Export the overridden CSS properties to a new CSS class.|
|Open Events Panel||Binding events to the selected component.|
|Copy||Make a copy of the selected component. As an alternative solution, you can use the shortcut Alt + C (⌥ + C for Mac)|
|Cut||Cuts the selected component so you can paste it elsewhere. As an alternative solution, you can use the shortcut Alt + X (⌥ + X for Mac)|
|Paste||Paste the copied component directly into your webform. As an alternative solution, you can use the shortcut Alt + V (⌥ + V for Mac)|
|Paste into||Paste the copied component into another component. As an alternative solution, you can use the shortcut Alt + ⇧ + V (⌥ + ⇧ + V for Mac)|
|Duplicate||Duplicate the selected component in the same parent component. As an alternative solution, you can use the shortcut Alt + D (⌥ + D for Mac)|
|Save as craft||Save the component, its child components, and their styles as a reusable component. As an alternative solution, you can use the shortcut Alt + K (⌥ + K for Mac)|
|Copy content||Copy content. As an alternative solution, you can use the shortcut Alt + ⇧ + C (⌥ + ⇧ + C for Mac)|
|Clear styles||Clear the styles of the selected component (resets the overridden CSS properties). As an alternative solution, you can use the shortcut Alt + J (⌥ + J for Mac)|
|Clear content||Clear content within the selected component. As an alternative solution, you can use the shortcut Alt + E (⌥ + E for Mac)|
Formatting options may vary based on the specific data type of the attribute and the type of component being used.
- For Text (string):
- UPPERCASE: Converts all characters to uppercase.
- lowercase: Converts all characters to lowercase.
- Capitalize: Capitalizes the first letter of the text.
- Capitalize Each Word: Capitalizes the first letter of each word.
- For Number:
- 0: Standard numerical format.
- 0%: Displays the number as a percentage.
- #,##0: Adds thousands separators to the number.
- #,##0.00: Adds thousands separators and displays two decimal places.
Refer to the Review guidelines for customizing
- For Date:
- Date short: Displays the date in a short format.
- Date long: Displays the date in a long format.
- Date abbreviated: Displays the date with abbreviated month name.
- ISO date GMT: Displays the date in ISO 8601 format with GMT time zone.
- UTC String: Displays the date in a UTC format.
Check the date-fns library for a comprehensive range of
date formatoptions and usage examples.
For instance, you can format your date as
EEE, MMM ddto achieve a different format from
date abbreviated, which has the format
EEE, MMM dd, yyyy.
- For Duration:
- Simple: 14:40:30.
- Distance: about 15 hours.
- Distance with Suffix: in about 15 hours.
- Strict Distance: 15 hours.
- Strict Distance with Suffix: in 15 hours.
This section serves as a fundamental introduction to the integration of data sources with components. It's essential to note that each component has its own dedicated section on its respective page, including the following subsections:
Data Binding: This step configures the connection between a component and a data source, determining where the component retrieves its data.
Data Display: After binding data, this section guides you in visually presenting data within the component, including configuring its appearance and additional components.
Dynamic Attribute Display: This section explains how a component can automatically display attributes of a selected data source, offering detailed information without extra interactions.
Server-Side Interaction: This section explains obtaining user selections in a server-side context when a datasource is bound to a component, enabling content retrieval and use.
Please note that the following subsections (Data Binding, Data Display, Dynamic Attribute Display, and Server-Side Interaction) may or may not be applicable to all components. Their presence or absence depends on the specific component's functionality and use case.