Slots can be used when we want a host widget to have a part of itself rendered inside a hosted widget.
For example, we could create a generic Section widget that would have a fixed structure of a title and content, and let the host widget pass part of itself as the content.
# Hosted Section
The slot from the host widget will be rendered in place of the
<ZSlotConsumer> tag in the hosted widget.
We provide the content to be used in place of the
<ZSlotConsumer> tag in SlotsSection inside
# Provider Slot
The content of a slot is provided inside a
<ZSlotProvider> tag needs to be placed inside the tag of the ezFlap widget that should consume it (i.e. render
It is possible to provide multiple, separate slots to a widget. To do that, we need to use named slots.
We name a slot by passing the
z-name attribute to
If our host widget only needs to provide a single unnamed slot - then the
<ZSlotProvider> tag can be omitted:
All the standard ezFlap attributes and behaviors can be used with the tags that are provided inside the
All of them will be processed in the context of the host widget, so:
z-for, text interpolations, etc. can reference the reactive data in the host widget, invoke bound methods, emit events, etc.
- They cannot access the reactive data of the hosted widget.
SLOT PROVIDERS ARE LIMITED
The only attributes allowed on a
<ZSlotProvider> tag are:
- z-scope (covered in Parameters From Consumer Slot below).
# Consumer Slot
<ZSlotConsumer> tags are used at the hosted widget side, to consume (render) the slots passed from the host with
<ZSlotConsumer> tags can be named (and, like with
<ZSlotProvider>, a single unnamed
<ZSlotConsumer> is allowed).
ezFlap will render the content of
<ZSlotProvider> tags in place of their corresponding
<ZSlotConsumer> tags at the
hosted widget side.
It is valid to not provide slots for any or all
<ZSlotConsumer> tags of a hosted widget.
By default, if no corresponding
<ZSlotProvider> is provided - ezFlap replaces the
<ZSlotConsumer> tag with a
It is possible to define an alternative default inside the
SLOT CONSUMERS ARE LIMITED
The only attributes allowed on a
<ZSlotConsumer> tag are:
- z-bind attributes (covered in Parameters From Consumer Slot below).
PAY ATTENTION TO CHILD / CHILDREN
<ZSlotConsumer> is replaced with the provided content "as-is".
This means that when providing content to a slot in a hosted widget, we need to know if the corresponding
<ZSlotConsumer> tag is inside a widget that accepts a single child or multiple children.
For example, if the
<ZSlotConsumer> is in a Container, and in its corresponding
<ZSlotProvider> we pass multiple
Text widgets - the application will not compile.
<ZSlotConsumer> can be used inside named parameters:
# Parameters From Consumer Slot
It is possible to pass parameters from a
<ZSlotConsumer> to a
For example, the hosted widget may want to render the a certain
<ZSlotProvider> multiple times, and pass different
data to it each time.
Data can be passed to the
<ZSlotProvider> by adding
z-bind or prefix-less attributes to the
The ZML inside
<ZSlotProvider> needs to access these parameters.
To do that, we need to assign a scope name, by adding the
z-scope attribute to the
Then, we will access the parameters with the syntax
<scope name>.<parameter's attribute name>. For example: