Concepts and Use Cases

In this Module, we present some important UI-related concepts to be familiar with. The main usage areas of each of them are explained, and we also provide a link to relevant articles as well as examples in Showroom.

We assume familiarity with all topics of the Appfarm Fundamentals module User Interface Fundamentals.

Container usage: Scrolling, Hover-events and Loaders

The Container is a multi-purpose UI Component. In fact, it's a <div> tag in HTML. First of all, it is used to divide the view into sections and control margin & alignment. It may also be used to create custom buttons or styling elements, and it may be used to create slidable lists/tiles or repeating constructions such as rows, tiles or multidimentional matrices (such as a calendar). All scroll settings are done on the Container as well.

Articles:

• Container article including info on Scroll and Hover and File-drop

Showroom examples:

• Loader

• Hover and File-drop

• Infinity Scroll

• Scroll to top (or to anchor)

Container usage: Multidimentional tables and swipeable lists

You may use the Container to create custom multidimentional tables, such as a Calendar or Data grids with repeating columns. You may also change the iteration variant of the container to allow for Swipeable lists or Recursive tree structures.

Articles:

• Build a Drag & Drop Calendar

Showroom examples:

• Calendar with Drag & Drop

• Create a Data grid using Containers

• Swipeable list

Drag & Drop

Drag & Drop is a nice feature in some contexts, such as when creating a Trello-like kanban.

Articles:

• Configure Drag & Drop

• File Drop on a Container

Showroom examples:

• Drag & Drop Kanban

• Example of File drop in Showroom on the Create File Object example and the Hover example