mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
Géry Debongnie
0a5a1e61dd
It is sometimes useful in practice to be able to configure the portal so that it looks for a target as close as possible as the portal location. For example, in odoo, a portal may be set up in a form view that should target the current form view. But if the form view itself is in a dialog, it may fail, because it may find a valid target in the form view that is located underneath. With this commit, we add a .closest modifier to the `t-portal` directive.
26 lines
905 B
Markdown
26 lines
905 B
Markdown
# 🦉 Portal 🦉
|
|
|
|
It is sometimes useful to be able to render some content outside the boundaries
|
|
of a component. To do that, Owl provides a special directive: `t-portal`:
|
|
|
|
```js
|
|
class SomeComponent extends Component {
|
|
static template = xml`
|
|
<div>this is inside the component</div>
|
|
<div t-portal="'body'">and this is outside</div>
|
|
`;
|
|
}
|
|
```
|
|
|
|
The `t-portal` directive takes a valid css selector as argument. The content of
|
|
the portalled template will be mounted at the corresponding location. Note that
|
|
Owl need to insert an empty text node at the location of the portalled content.
|
|
|
|
The `t-portal` directive supports a `.closest` modifier. It is useful to select
|
|
the closest target from the portal location: Owl will look for a target in the
|
|
current parent element, then in its parent, and so on until it finds it.
|
|
|
|
```xml
|
|
<div t-portal.closest="'.target'">some content</div>
|
|
```
|