View components

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

  • Icon
  • Title
  • Text
  • Image
  • Spinner
  • Card

• Forms – components used to build forms

  • Button
  • Dropdown field
  • Checkbox field
  • Slider field
  • Password field
  • Inout field

• Layout – components used to create layouts

  • Container
  • Row
  • 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

  • Checkbox
  • Dropdown
  • Input
  • Slider
  • 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. If you want to create your own component, check out this guide: Creating and editing view components.

Installed 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.