Директива @teleport

Директива @teleport позволяет переместить фрагмент шаблона в другое место DOM-дерева, сохраняя при этом реактивность и состояние компонента. В значение передаётся CSS-селектор целевого контейнера, куда будет перемещён содержимый блок. После перемещения Livewire продолжает отслеживать изменения внутри телепортированного фрагмента.

Синтаксис

@teleport("body")
	<div>
		Content to teleport
	</div>
@endteleport

Пример

Давайте переместим сообщение из компонента в конец тела документа:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class TeleportExample extends Component
	{
		public $message = 'Teleported message';
		
		public function updateMessage()
		{
			$this->message = 'Updated teleported message';
		}
		
		public function render()
		{
			return view('livewire.teleport-example');
		}
	}
?>

<div>
	<button wire:click="updateMessage">
		Update message
	</button>
	
	@teleport("body")
		<div id="teleported-block">
			{{ $message }}
		</div>
	@endteleport
</div>

Результат выполнения кода:

<div>
	<button>
		Update message
	</button>
</div>
...
<div id="teleported-block">
	Teleported message
</div>

Пример

Давайте переместим несколько элементов в контейнер с классом:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class TeleportMultiple extends Component
	{
		public $items = [1, 2, 3, 4, 5];
		
		public function addItem()
		{
			$this->items[] = count($this->items) + 1;
		}
		
		public function render()
		{
			return view('livewire.teleport-multiple');
		}
	}
?>

<div>
	<button wire:click="addItem">
		Add item
	</button>
	
	@teleport(".container")
		@foreach ($items as $item)
			<p class="item">
				Item: {{ $item }}
			</p>
		@endforeach
	@endteleport
</div>

Результат выполнения кода:

<div>
	<button>
		Add item
	</button>
</div>
<div class="container">
	<p class="item">
		Item: 1
	</p>
	<p class="item">
		Item: 2
	</p>
	<p class="item">
		Item: 3
	</p>
</div>

Пример

Давайте используем телепорт с условным отображением:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class TeleportConditional extends Component
	{
		public $showModal = false;
		
		public function toggleModal()
		{
			$this->showModal = !$this->showModal;
		}
		
		public function render()
		{
			return view('livewire.teleport-conditional');
		}
	}
?>

<div>
	<button wire:click="toggleModal">
		Toggle modal
	</button>
	
	@teleport("#modal-container")
		@if ($showModal)
			<div class="modal">
				<p>Modal content</p>
				<button wire:click="toggleModal">
					Close
				</button>
			</div>
		@endif
	@endteleport
</div>

Результат выполнения кода:

<div>
	<button>
		Toggle modal
	</button>
</div>
<div id="modal-container">
	<div class="modal">
		<p>
			Modal content
		</p>
		<button>
			Close
		</button>
	</div>
</div>

Смотрите также

директиву @livewire,
которая вставляет компонент Livewire в шаблон
директиву @script,
которая добавляет JavaScript-скрипт в компонент
директиву @placeholder,
которая отображает содержимое во время загрузки
директиву @island,
которая изолирует часть шаблона от обновлений