Skip to content

Flexbox: Extend Flexbox

What are we learning here?

  • How to create an component based on Flexbox

The flexbox component can also be used to start a new component directly with a flexbox layout. The new component can extend Flexbox. Let's implement a component that extends Flexbox instead of loading into a stage:

src/demo/apps/flexbox-component/content.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import { Flexbox, Message } from "@codecoupler/cc-ui";
export default class extends Flexbox {
  static defaults = {
    "@codecoupler": {
      flexbox: {
        root: {
          type: "row",
          content: [
            {
              type: "stage",
              id: "main",
              private: true,
              style: { width: "50%" },
              class: "bg-success text-white"
            },
            {
              type: "column",
              grow: true,
              content: [
                {
                  type: "stage",
                  id: "sidebar-top",
                  style: { height: "50%" },
                  class: "bg-primary text-white"
                },
                {
                  type: "stage",
                  id: "sidebar-bottom",
                  style: { height: "50%" },
                  class: "bg-warning text-black"
                }
              ]
            }
          ]
        }
      }
    }
  };
  async start() {
    this.stage.load(Message);
    this.getStage("sidebar-top").load(Message);
    this.getStage("sidebar-bottom").load(Message);
  }
}

Use Namespaced Option if Extending

If you want to extend Flexbox the namespaced options must be used instead the options on the top level.

Stage 'main' must be private

If you want to use the id main you must create the stage as private.

Replacing Stages do not Work

Replacing stages with an id $ do not work here as you may expect. A replacing stage replace the stage of a parent component, not any stage of the own component.

Now we create an application component which loads our new component:

src/demo/apps/flexbox-component/index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import { Application } from "@codecoupler/cc-ui";
import Content from "./content.js";
export default class extends Application {
   static defaults = {
      "@codecoupler": {
         panel: {
            panelSize: "1000 510",
            headerTitle: "Test Flexbox Features"
         }
      }
   };
   async start() {
      await this.stage.load(Content);
   }
}

We load the new application in our root.js file (just by replacing the previous one):

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/flexbox-component";
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);
  }
}