Flexbox: Extend Flexbox

The flexbox component can also be used to start directly with a flexbox layout. Here is just a short approache how this could be implemented:

import { Flexbox } from "@codecoupler/cc-ui";
export default class extends Flexbox {
  static defaults = {
    "@codecoupler": {
      flexbox: {
        root: {
          type: "column",
          content: [
            { type: "stage", id: "sidebar", class="bg-primary text-white"},
            { type: "stage", id: "main", grow: true, private: true}
          ]
        }
      }
    },
  }
  async start() {
    // Here you can use the stages
  }
}

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.