Introduction
New in: 5.2.4 The $genesis
widget allows the dynamic construction of another widget, where the name and attributes of the new widget can be dynamically determined, without needing to be known in advance.
Content and Attributes
The content of the $genesis
widget is used as the content of the dynamically created widget.
Attribute | Description |
---|---|
$type | The type of widget or element to create (an initial $ indicates a widget, otherwise an HTML element will be created) |
$names | An optional filter evaluating to the names of a list of attributes to be applied to the widget |
$values | An optional filter evaluating to the values corresponding to the list of names specified in $names |
$mode | An optional override of the parsing mode. May be "inline" or "block" |
{other attributes starting with $} | Other attributes starting with a single dollar sign are reserved for future use |
{attributes starting with $$} | Attributes starting with two dollar signs are applied as attributes to the output widget, but with the attribute name changed to use a single dollar sign |
{attributes not starting with $} | Any other attributes that do not start with a dollar are applied as attributes to the output widget |
New in: 5.2.6 If the $type
attribute is missing or blank, the $genesis
widget does not render an intrinsic element, instead just rendering its children.
Note that attributes explicitly specified take precedence over attributes with the same name specified in the $names
filter.
Examples
<$genesis $type="div" class="tc-thing" label="Squeak">Mouse</$genesis>
That renders as:
Mouse
... and the underlying HTML is:
<p><div class="tc-thing" label="Squeak">Mouse</div></p>
\define my-banner(mode:"inline",caption)
<$genesis $type={{{ [<__mode__>match[inline]then[span]else[div]] }}} class="tc-mybanner">
<<__caption__>>
</$genesis>
\end
<<my-banner caption:"I'm in a SPAN">>
<<my-banner mode:"block" caption:"I'm in a DIV">>
That renders as:
... and the underlying HTML is:
<p><span class="tc-mybanner">
I'm in a SPAN
</span></p><p><div class="tc-mybanner">
I'm in a DIV
</div></p>
Important
<$genesis $type="my-element" $names="one two" $values="1 2">Test Genesis Widget</$genesis>
That renders as:
... and the underlying HTML is:
<p><my-element two="2">Test Genesis Widget</my-element></p>