Skip to main content

Multiple Slots

Certain elements have multiple different slots where different sets of children can be displayed. For example, the Tab element has both a header and a body. To populate one of the secondary slots, use the %ui:slotName { ... } syntax:

Tab($fireball) {
  %ui:header { // Populates the header slot of `Tab`
    "Fireball"
  }
  
  P { "Launch a ferocious ball of fire that engulfs your enemies" }
}

How It Works​

The Tab element calls it callback with two parameters: ui and ui:header. These represent two different slots in the user interface where children can be displayed. When you enter a %ui:header { ... } block, it temporarily replaces ui with ui:header, so everything inside the block is added to the ui:header slot instead of the main ui slot.