Перейти к содержанию

Телепортация⚓︎

Livewire позволяет вам телепортировать часть вашего шаблона в совершенно другую часть DOM на странице.

Это полезно для таких вещей, как вложенные диалоговые окна. При вложении одного диалогового окна в другое z-index родительского модального окна применяется и к вложенному. Это может вызвать проблемы со стилизацией фоновых подложек и перекрывающих слоев. Чтобы избежать этой проблемы, вы можете использовать директиву Livewire @teleport для рендеринга каждого вложенного модального окна в качестве соседних элементов в итоговом DOM.

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

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

Чтобы телепортировать часть вашего шаблона в другую часть DOM, вы можете обернуть её в директиву Livewire @teleport.

Ниже приведен пример использования @teleport для рендеринга содержимого модального окна в конце элемента <body> на странице:

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

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

Информация

Селектор @teleport может быть любой строкой, которую вы обычно передаете во что-то вроде document.querySelector().

Вы можете узнать больше о document.querySelector(), обратившись к его документации на MDN.

Теперь, когда приведенный выше шаблон Livewire отрендерится на странице, содержимое модального окна будет отрендерено в конце <body>:

<body>
    <!-- ... -->

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

Вы должны телепортировать за пределы компонента

Livewire поддерживает только телепортацию HTML за пределы ваших компонентов. Например, телепортировать модальное окно в тег <body> — это нормально, но телепортация в другой элемент внутри вашего компонента работать не будет.

Телепортация работает только с одним корневым элементом

Убедитесь, что вы включаете только один корневой элемент внутрь вашей инструкции @teleport.