@empathyco/x-components
Version:
Empathy X Components
71 lines (50 loc) • 4.3 kB
Markdown
---
title: BaseTeleport
---
# BaseTeleport
## Props
| Name | Description | Type | Default |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ------------------------ |
| <code>target</code> | The element or css selector to which the component will be teleported. | <code>string \| Element</code> | <code></code> |
| <code>position</code> | The position relative to the target<br />- `beforebegin`: Before the target element.<br />- `afterbegin`: Inside the target element, before its first child.<br />- `beforeend`: Inside the target element, after its last child.<br />- `afterend`: After the target element.<br />- `onlychild`: Adds it as child and hides all other children of the target element. | <code>string</code> | <code>'onlychild'</code> |
| <code>disabled</code> | If disabled, the slot content will not be teleported | <code>boolean</code> | <code>false</code> |
| <code>hostStyle</code> | Styles for the teleport (content container) | <code>string \| CSSStyleDeclaration</code> | <code></code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ----------- | ----------------------------------------- |
| <code>default</code> | | None |
## Example
The BaseTeleport component allows you to teleport its slot content to a specified target element in
the DOM. It provides flexibility in positioning the content relative to the target element and
supports shadow DOM integration.
### Basic example
Teleport content to a specific element in the DOM:
```vue
<template>
<BaseTeleport target="#my-target">
<div>This content will be teleported.</div>
</BaseTeleport>
</template>
```
### Positioning options
Teleport content inside the target element, before its first child:
```vue
<template>
<BaseTeleport target="#my-target" position="afterbegin">
<div>Teleported content at the beginning.</div>
</BaseTeleport>
</template>
```
### Disabled Teleport
Prevent teleporting the content:
```vue
<template>
<BaseTeleport target="#my-target" :disabled="true">
<div>This content will not be teleported.</div>
</BaseTeleport>
</template>
```
### Notes
- When using the `onlychild` position, all other children of the target element will be hidden.
- The component supports shadow DOM integration, automatically handling style injection. Anyway, Empathy's custom CSS
injector is required. Teleport depends on it to add the styles.