One valuable pattern in Imba is to create reusable and extendable tags for components and controls. Here we'll show you how to create a basic tag whose rendertree is composed of separate segments.
<@header> title or "Panel"
<@body> "My content"
tag settings < panel
<div> "Stuff in settings"
<div> "More settings"
Tip! When splitting the rendering into several methods outside of
<self> all top-level tags must have an explicit name using the @-syntax like
<div@myname>. Otherwise the div and its children will be recreated on every render. When tags have a name they will be created once (on the first call) and cached inline. This is one of the things that make Imba really fast.
As you might know, tags are compiled to chains of setters.
<div.hello> "world" will compile to something along the lines of
div().flag('hello').setContent(['world']).end(). As you can see, the inner content of a tag is using a setter. We can override setContent to simply store a reference to the content, and then include the content somewhere inside the render-tree of the tag.
Overriding setContent is not something we'd recommend unless you really understand how rendering in Imba works. To learn more about rendering, see guide.
def setContent value
@content = value
<div.footer> "My footer"
All panels we spawn will now always wrap their content inside a div.body.