Skip to content

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.