Skip to content

Stages & Levels: Loading Multiple Components

What are we learning here?

  • Loading multiple components into a stage and into different levels

You can load multiple components into a stage. As we have seen aleady before, you can assign an id to each component you load, so you can address it later. In case you load a component with the same id the following rules apply:

  • Every new component will be displayed in front of all other component and the other components will be hidden if their position is not absolute or fixed (that is the case in widget and canvas components).
  • If you try to load a component with an id and the id exists already, the existing widget will be only fronted and not created again. The options you have specified will be passed and merged to the existing instance.
  • If an existing component is currently in the destroy process, this is awaited and a new instance is created.

You can load a component into a specific level of a stage. Every stage level have its own stacking context. This means that all components within a level can only overlap themselves, but not components from the other levels. Stage levels themselves are in turn arranged one above the other.

The default z-order of the levels is:

  • backgorund
  • base
  • foreground
  • block
  • hint

❗ An important points to remember about levels:

All levels share the same id's of all components in a stage! This has the effect that an already loaded component cannot be loaded into another level with the same id. Trying to load a component with an already existing id into another level, the already loaded component would only be fronted within its level.