CodeCoupler UI Stage
A stage is an element in which components can be loaded. A stage is not just the element. A stage have also a context of component. This means that a stage knows and manages all child components of a component.
A stage is always owned by one component but multiple stages can share the same element.
Inside a stage exists mutiple levels in which components can be loaded.
Default Structure:
┌──────────────────────────────────────────────────────────────────────────┐
│ │
│ Main element of the stage. │
│ Accessible over this.env.start.stage.element or $element │
│ │
| CSS: |
│ position: absolute | relative | fixed (Default: relative) │
│ isolation: isolate │
│ overflow: hidden │
│ flex-basis: 0 (Will only be set if flex-grow is "1") │
│ │
│ Furthermore the element have the class "codecoupler__stage". │
│ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ Root elements of components with level "base" │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Stage level elements. │ │
│ │ Every level have its own container │ │
│ │ │ │
│ │ CSS: │ │
│ │ inset: 0 │ │
│ │ position: absolute │ │
│ │ isolation: isolate │ │
│ │ overflow: hidden │ │
│ │ z-index: Taken from this.settings.stageLevel[levelname] │ │
│ │ │ │
│ | ┌───────────────────────────────────────────────────────────────┐ │ |
│ | │ Root elements of components with level not "base" │ │ |
│ | └───────────────────────────────────────────────────────────────┘ │ |
│ │ │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────┘