- 20 May 2022
- 2 Minutes to read
- Updated on 20 May 2022
- 2 Minutes to read
The component library panel gives you easy access to the various view components you can add to your app. It takes up the top half of the left sidebar.
The panel is divided into three tabs.
- Core – core components by AppGyver, common in most apps
- By me – components created by you for this app
- Added – components added from the Marketplace for this app
Under the tabs, you can access the Component Marketplace. If components you've added via the Marketplace to your app have new updates to them, a red badge will be shown with the number of pending updates.
The core tab contains basic view components that are divided into simple categories. Under each category below, the included components are listed with a link to the reference documentation.
Basic – basic, commonly used components
Forms – components used to build forms
- Dropdown field
- Checkbox field
- Slider field
- Password field
- Inout field
Layout – components used to create layouts
- Scroll view
Lists – components used to create lists
- List divider
- List section header
- Image list item
- Large image list item
- List item
- Icon list item
- Search bar
- Toggle list item
Primitives – basic component building blocks
Compared to the other two tabs, Core components have icons. Drag them onto the canvas to see how they look like.
By me tab
Here, you can see a list of all the components you've created, with a preview image showing how each will look on the view canvas. If you want to create your own component, check out this guide: Creating and editing view components.
Here, you can see a list of all the components you've added from the Marketplace, with a preview image showing how it each look on the view canvas.
Adding components via the library panel
There are two ways to add components into your app from the component library panel.
- Drag-and-drop onto the view canvas
- Drag-and-drop onto the layout tree
Both methods work the same way regardless of the component library panel tab you are on.
Drag onto the view canvas
As you grab a component and drag it onto the view canvas, a green highlight will appear around the container the component will be placed into. A blue horizontal line shows you the target location inside the container.
As you are dragging the component on the view canvas, the layout tree also updates to show the component's new position in the layout structure.
Drag into the layout tree
The layout tree (located at the bottom of the right sidebar) shows you the precise structure of your page's components. You can end your drag-and-drop in the layout tree to place the component in precisely the correct position.