Flexbox: Split Stage

In many cases you need to split a stage into multiple parts before loading components. A flexbox layout is the best choice for this.

To do this, you would have to implement a component, load an HTML structure into this and then register the stages. The Flexbox component simplify this process.

What are we learning here?

• Use Flexbox to divide stage

In case you want to split a stage into two parts, one small (like a header, sidebar or footer) and then all the rest it is always the same flexbox scheme like this:

<div class="h-100 d-flex flex-column">
  <div class="bg-primary text-white" data-cc-stage="sidebar"></div>
  <div class="flex-grow-1" data-cc-stage="$"></div>
</div>

A Flexbox component can build a flexbox layout like this and split a stage a smaller parts. In addition, it is more efficient because Flexbox uses less div elements.

Flexbox will be loaded with an option object that must conatin at least the property root. This represents the root div element. The value of the property root have to be an object with a property type. The type can be row, column or stage. You can also specify div to create a simple div element but we will not use it here.

If the type is row or column a flexbox container will be created and the object should have additionaly a property content which must be an array of objects. The objects of this array have again recursively the same structure as root and represents child div element.

If the type is stage a flexbox child will be created which will be registered as a stage. You should set an additional property id which will be the id of the created stage. You can set optional private: true to make the stage private.

On every level below the root element you can optionally set grow: true or shrink: false to change the default resizing options of an flexbox item. On every level including the root element you can optionally set class and style to add classnames or styles to the element.

The above layout would be:

{
  root: {
    type: "column",
    content: [
      { type: "stage", id: "sidebar", class: "bg-primary text-white"},
      { type: "stage", id: "$", grow: true}
    ]
  }
}

Let's add a sidebar on the right with one command and load a message in it. As we use a relacing stage, all the other code below the new one stays the same:

src/demo/apps/stage-levels/index.js

import { Application, CenteredMessage, Flexbox } from "@codecoupler/cc-ui";
import MainLayout from "./layout.js";
export default class extends Application {
  static defaults = {
    "@codecoupler": {
      panel: {
        panelSize: "800 600",
        headerTitle: "Test Stage Levels"
      }
    }
  };
  async start() {
    await this.stage.load(Flexbox, {
      "@codecoupler": {
        flexbox: {
          root: {
            type: "row",
            content: [
              {
                type: "stage",
                id: "sidebar",
                class: "bg-primary text-white p-2"
              },
              { type: "stage", id: "$", grow: true }
            ]
          }
        }
      }
    });
    await this.getStage("sidebar").load(CenteredMessage, {
      text: "The\nSidebar"
    });
    await this.stage.load(MainLayout, {
      widget1: {
        component: CenteredMessage,
        options: () => ({
          text: `Component Number 1\nRandom: ${Math.random()}`,
          css: { backgroundColor: "#fff" }
        })
      },
      widget2: {
        component: CenteredMessage,
        options: () => ({
          text: `Component Number 2\nRandom: ${Math.random()}`,
          css: { backgroundColor: "#eee" }
        })
      },
      widget3: {
        component: CenteredMessage,
        options: () => ({
          text: `Component Number 3\nRandom: ${Math.random()}`,
          css: { backgroundColor: "#ddd" }
        })
      }
    });
  }
}