Intro to Components
Components are used to build the user interface (UI) of your app. Each Screen and Block has its own set of components which comprise its UI. Draftbit comes with many different types of components that can be combined, customized, and styled to make your app uniquely yours, including layout containers, text and buttons, form inputs, media players, maps, swipers, and more!
Component Tree
The component tree is a list representation of the components that exist on a selected Screen or Block
Components added to Screens and Blocks are stacked vertically from top to bottom, just as they appear in the component tree. Components can also be reordered and nested using drag-and-drop in the component tree.
Flex Layout can be used to further layout nested groups of components, inside a View for example, to build complex user interfaces.
Adding components
- From the top section of the left panel, select the Screen or Block that you want to add the component to
- Click the
+
icon at the top of the component tree to open the component picker and view all the available components - Click on a component to add to an instance of that component to the Screen or Block
The same process can be used to add a component as a child of another component which accepts child components, such as a View. Simply select the parent component instead of the Screen component in the component tree before picking a new component to add.
Moving components
Drag-and-drop components within the component tree to reorder them on the Screen or within their parent component. The blue line displayed in the component tree indicates the location where the component will be dropped.
Nesting components
Some components, such as a View, can contain one or more child components. Drag-and-drop components into parent components within the component tree to nest them. The component will highlighted blue to indicate where the component will be dropped.
Duplicating components
If you simply want to duplicate an existing component and its child components on the same Screen or Block, in the component tree hover over the component you'd like to duplicate, click the overflow menu (three dots) on the right, then select Duplicate.
The duplicate will be added below the component which was duplicated in the component tree.
Copy/pasting components
You can also copy components from one Screen or Block and paste them into another Screen or Block.
In the component tree hover over the component you'd like to copy, click the overflow menu (three dots) on the right, and then click Mark For Copy.
You'll see an indicator at the bottom of the component tree that shows you there's a component marked for copy. Clicking on the component name will take you to the component you originally selected, and clicking Unmark will deselect the indicated component.
Once your component is copied, you can then paste it into another Screen or Block by selecting the parent component in the component tree where you'd like to place the copy, opening the overflow menu, and clicking Paste "[Name of Component]"
Adding a parent component
You can wrap a component - including its children - in a parent component from the overflow menu (three dots) in the component tree. Just select Add Parent and pick a compatible component.
Hiding components
To hide a component, click on the component's icon in the component tree
When a component is hidden, the component and its children will not be rendered on the Screen or included in the generated source code.
Hiding Custom Code components might result in red screens, so be careful!
Deleting components
In the component tree you can click the overflow menu (three dots) for the component you'd like to delete and then click Delete.
Restoring components
It's possible to restore deleted components on a Screen. You can view all the deleted components using the icon at the top of the component tree and restore them as needed.
Converting to Blocks
Components can be converted into Saved Blocks so that you can reuse them throughout your app while only needing to make changes in once place when you want to make an update.
Check out the Saved Blocks doc for more details.
Conditional Display
You can conditionally display a component based on a given condition (e.g. a variable's value). Learn more about conditionally displaying components in the Conditional Display doc.
Updated about 2 months ago