View component library panel
Drag-and-drop view components onto the View Canvas quickly
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.

Core tab

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
      Title
      Paragraph
      Image
      Loading spinner
      Icon
      Card
    Forms – components used to build forms
      Button
      Password
      Text input
      Checkbox
      Dropdown
      Slider
    Layout – components used to create layouts
      Row
      Container
      Scroll view
    Lists – components used to create lists
      List section
      List item with image
      List item with image and description
      List item
      List item with icon
      Search bar
      List divider
      List item with toggle
    Primitives – basic component building blocks
      Checkbox
      Input field
      Password Field
      Slider
      Text
      Toggle
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.

Added tab

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.
Last modified 10mo ago