Skip to content

Commit

Permalink
feat(docs): Перевод teleports (#168)
Browse files Browse the repository at this point in the history
  • Loading branch information
mnenie authored Jun 12, 2024
1 parent 34ce70b commit 82d74ce
Showing 1 changed file with 8 additions and 8 deletions.
16 changes: 8 additions & 8 deletions docs/3.api/1.components/11.teleports.md
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
---
title: '<Teleport>'
description: The <Teleport> component teleports a component to a different location in the DOM.
description: Компонент <Teleport> телепортирует компонент в другое место в DOM.
---

::warning
The `to` target of [`<Teleport>`](https://ru.vuejs.org/guide/built-ins/teleport.html) expects a CSS selector string or an actual DOM node. Nuxt currently has SSR support for teleports to `body` only, with client-side support for other targets using a `<ClientOnly>` wrapper.
Цель `to` в [`<Teleport>`](https://ru.vuejs.org/guide/built-ins/teleport.html) ожидает строку CSS-селектора или фактический узел DOM. В настоящее время Nuxt имеет поддержку SSR только для телепортов в `body`, а для других целей на стороне клиента используется обертка `<ClientOnly>`.
::

## Body Teleport
## Телепорт в Body

```vue
<template>
<button @click="open = true">
Open Modal
Открыть модальное окно
</button>
<Teleport to="body">
<div v-if="open" class="modal">
<p>Hello from the modal!</p>
<p>Привет из модального окна!</p>
<button @click="open = false">
Close
Закрыть
</button>
</div>
</Teleport>
</template>
```

## Client-side Teleport
## Телепорт на стороне клиента

```vue
<template>
<ClientOnly>
<Teleport to="#some-selector">
<!-- content -->
<!-- контент -->
</Teleport>
</ClientOnly>
</template>
Expand Down

0 comments on commit 82d74ce

Please sign in to comment.