Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
51 lines (40 sloc) 1.64 KB
extends ../docs-base
block doc
h1 Component nesting
p.
As with any ui framework, you can nest components inside eachother,
creating deep and complicated structures of carefully constructed
state of the art markup.
h2 Basic nesting
include ../../examples/basic-nesting
p.
The above example should be pretty explanatory. Fig looks for tags
of registered components in the template, if it matches one of the
components, the tag gets populated with the contents of the component's
own template.
p.warn.
Because the cycle continues recursively downwards, be careful to not
include a component within itself to prevent stack overflows!
h2 Passing data
p.
You can pass data into child components by attaching it to attributes
of the child component tag.
include ../../examples/passing-data
p.warn.
Although it is possible to pass any data as props to components,
when reading data off the #[b opts] object it is required to cast
Boolean and Integer with #[b Boolean()] and #[b parseInt()] in that
order. This hack is required for many of pug's features to work
properly, see this
#[a(href='https://github.com/nikersify/fig/tree/master/test/integration/opts') test] for
more information.
h2 Slots
p.
You can "slot" elements inside of a component call, which then can
be accessed with the special #[b slot] tag inside the component. You
can use as many slotted elements as you want to - they'll be distributed
on all #[b slot] tags from top to bottom.
include ../../examples/slots
p.
Notice how the #[b many-slots] component's template only has two slots,
so the third slotted element #[b div hello!] got discarded.