Skip to content

Flexbox: Split Stage

What are we learning here?

  • Use Flexbox component to divide 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. 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 p-2"
    data-cc-stage="sidebar"
    data-cc-stage-access="public"
  ></div>
  <div
    class="flex-grow-1"
    data-cc-stage="$"
    data-cc-stage-access="public"
  ></div>
</div>

The component Flexbox simplify this process. 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 components can be loaded with an option object without namespaced options. The passed options will be mapped automatically into the correct namespace.

The option object 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. Stages of the flexbox component are by default public. 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.

In summary 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 header to our root component. We will use a replacing stage, so we can split our main stage and all the other code below the new one stays the same. Into the header we will load our LoadingComponents widget.

src/root.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import { Component, Flexbox } from "@codecoupler/cc-ui";
import LoadingComponents from "./demo/components/loading-components";
import TestApp from "./demo/apps/canvas-vs-widget-layout";
export default class extends Component {
  async start() {
    await this.stage.load(Flexbox, {
      root: {
        type: "column",
        content: [
          { type: "stage", id: "top", class: "card-header" },
          { type: "stage", id: "$", grow: true }
        ]
      }
    });
    await this.getStage("top").load(LoadingComponents);
    await this.stage.load(TestApp);
  }
}