Component and Container Basics

Neo.mjs views are made up of components and containers.

A component is a visual widget, such as a button, label, or text field. A container is a visual collection of components.

Neo.component.Base is the base class for all components. It introduces some common features, such as event handling, binding, and some life-cycle methods.

Neo.container.Base is the base class for all containers. Containers are also components.

Neo.container.Base

Containers are commonly used, although there are many specialized sub-classes, such as panels and toolbars.

Containers have two key properties:

• items, which are the components within the container, and
• layout, which describes how the items are arranged

Neo.component.Base

The component base class introduces common component features, but is rarely used itself because it's so primitive. Components introduce various properties, such as width, height, cls (to specify CSS classes for the component).

Here's a container, with one child item.

Components also have an html. The html property is rarely used, and goes against the abstract philosophy of Neo.mjs, but sometimes it's handy as a placeholder as you stub out views.

Layout

The layout config specifies how components are arranged within a container. Here are examples of some commonly-used layouts.

Fit layout

Fix is used when there's a single child. The component is sized to fit the container.

Vbox and hbox

With vbox and hbox, items are arranged vertically or horizontally.

Card

A card container has multiple child items, one of which is visible.

Reusing components

Neo.mjs is class-based, and thus, any component or container can be defined as its own class, and reused like any other component in the framework.