Директива `@teleport`⚓︎

Директива @teleport отрисовывает часть вашего шаблона в другом месте DOM, за пределами обычного размещения компонента.

Базовое использование⚓︎

Оберните контент в @teleport и укажите место для рендеринга с помощью CSS-селектора:

<div>
    <div x-data="{ open: false }">
        <button @click="open = ! open">Переключить модалку</button>

        @teleport('body')
            <div x-show="open">
                Содержимое модального окна...
            </div>
        @endteleport
    </div>
</div>

Содержимое модального окна будет отрисовано в конце элемента <body>:

<body>
    <!-- Контент страницы... -->

    <div x-show="open">
        Содержимое модального окна...
    </div>
</body>

Любой допустимый CSS-селектор

Селектор @teleport может быть любой строкой, которую вы передали бы в document.querySelector(), например 'body', '#modal-root' или '.modal-container'.

Зачем использовать teleport?⚓︎

Телепортация полезна для вложенных модальных окон, выпадающих списков и поповеров, где стили родительских элементов или значения z-index могут мешать правильному отображению.

Без телепортации:

<div style="z-index: 10;">
    <!-- Родительское модальное окно с z-index: 10 -->

    <div style="z-index: 20;">
        <!-- Дочернее модальное окно наследует контекст наложения родителя -->
        <!-- Фон (backdrop) может неправильно перекрывать родительское окно -->
    </div>
</div>

С телепортацией:

<div style="z-index: 10;">
    <!-- Родительское модальное окно -->

    @teleport('body')
        <div style="z-index: 20;">
            <!-- Дочернее окно отрисовывается как соседний элемент на уровне body -->
            <!-- Фон может правильно перекрывать всё остальное -->
        </div>
    @endteleport
</div>

Распространённые варианты использования⚓︎

Модальные диалоги:

@teleport('body')
    <div class="fixed inset-0 bg-black/50" x-show="showModal">
        <div class="modal">
            <!-- Контент модального окна... -->
        </div>
    </div>
@endteleport

Выпадающие меню:

@teleport('body')
    <div class="absolute" x-show="open" style="top: {{ $top }}px; left: {{ $left }}px;">
        <!-- Элементы выпадающего списка... -->
    </div>
@endteleport

Toast-уведомления:

@teleport('#notifications-container')
    <div class="toast">
        {{ $message }}
    </div>
@endteleport

Важные ограничения⚓︎

Необходимо телепортировать за пределы компонента

Livewire поддерживает телепортацию HTML только за пределы ваших компонентов. Телепортация в другой элемент внутри того же компонента не сработает.

Требуется один корневой элемент

Внутри оператора @teleport должен быть только один корневой элемент. Несколько корневых элементов не поддерживаются.

Правильно:

@teleport('body')
    <div>
        <h2>Заголовок</h2>
        <p>Контент</p>
    </div>
@endteleport

Неправильно:

@teleport('body')
    <h2>Заголовок</h2>
    <p>Контент</p>
@endteleport

Работает на базе Alpine⚓︎

Эта функциональность использует директиву Alpine x-teleport.

Узнать больше о телепортации контента →

Справочник⚓︎

@teleport(string $selector)
    <!-- Контент -->
@endteleport

Параметр	Тип	По умолчанию	Описание
`$selector`	`string`	обязательно	CSS-селектор, указывающий место для рендеринга контента (например, `'body'`, `'#modal-root'`, `'.container'`)

Директива @teleport⚓︎