Examples
Call for Examples
This section is pretty empty right now. It could need some more lovely examples.
PRs are welcome 😃
Basic
This is the starter example from the "Getting Started" page, demonstrating the basic usage.
SOURCE
The content below this paragraph is rendered in the right/bottom (red) container by PortalVue
TARGET
Â
Â
<template>
<Design-Container>
<Design-Panel color="green" text="Source">
<p>
The content below this paragraph is
rendered in the right/bottom (red) container by PortalVue
</p>
<Portal to="right-basic">
<p class="red">
This is content from the left/top container (green).
The cool part is, it works across components,
so you can send your content anywhere!
</p>
</Portal>
</Design-Panel>
<Design-Panel color="red" text="Target" left>
<PortalTarget name="right-basic"></PortalTarget>
</Design-Panel>
</Design-Container>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Dynamic sidebar content
By selectively rendering different <Portal> components that all send to the same <PortalTarget> (but not at the same time), we can replace the <PortalTarget>'s content on demand, e.g. to put something into a sidebar area from teh main component:
Missing
The example is still missing, haven't gotten around to migrating it from this codepen of v1
More to follow
More examples will hopefully follow soon. Send me some suggestions!