テレポート
Livewireを使用すると、テンプレートの一部をページ上のDOMの別の場所に_teleport_（テレポート）できます。Livewire allows you to teleport part of your template to another part of the DOM on the page entirely.
これは、ネストされたダイアログなどに役立ちます。あるダイアログを別のダイアログの中にネストする場合、親モーダルのz-indexがネストされたモーダルに適用されます。これにより、スタイリングの背景やオーバーレイに問題が発生する可能性があります。この問題を回避するために、Livewireの@teleportディレクティブを使用して、ネストされた各モーダルをレンダリングされたDOM内で兄弟としてレンダリングできます。This is useful for things like nested dialogs. When nesting one dialog inside of another, the z-index of the parent modal is applied to the nested modal. This can cause problems with styling backdrops and overlays. To avoid this problem, you can use Livewire's @teleport directive to render each nested modal as siblings in the rendered DOM.
この機能は、Alpineの x-teleport ディレクティブ によって実現されています。This functionality is powered by Alpine's x-teleport directive[https://alpinejs.dev/directives/teleport].
基本的な使い方Basic usage
テンプレートの一部をDOMの別の場所に_teleport_するには、Livewireの@teleportディレクティブで囲みます。To teleport a portion of your template to another part of the DOM, you can wrap it in Livewire's @teleport directive.
以下は、@teleportを使用して、モーダルダイアログの内容をページの<body>要素の最後にレンダリングする例です。Below is an example of using @teleport to render a modal dialog's contents at the end of the <body> element on the page:
<div>
<!-- Modal -->
<div x-data="{ open: false }">
<button @click="open = ! open">Toggle Modal</button>
@teleport('body')
<div x-show="open">
Modal contents...
</div>
@endteleport
</div>
</div>
Info:
@teleportセレクターには、通常document.querySelector()のようなものに渡す文字列を使用できます。[!info] The@teleportselector can be any string you would normally pass into something likedocument.querySelector().
document.querySelector()の詳細については、MDNドキュメントを参照してください。You can learn more aboutdocument.querySelector()by consulting its MDN documentation[https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector].
これで、上記のLivewireテンプレートがページにレンダリングされると、モーダルの_contents_部分が<body>の最後にレンダリングされます。Now, when the above Livewire template is rendered on the page, the contents portion of the modal will be rendered at the end of <body>:
<body>
<!-- ... -->
<div x-show="open">
Modal contents...
</div>
</body>
Warning! You must teleport outside the component Livewireは、HTMLをコンポーネントの外部にteleportすることのみをサポートしています。たとえば、モーダルを
<body>タグにteleportするのは問題ありませんが、コンポーネント内の別の要素にteleportすることはできません。[!warning] You must teleport outside the component Livewire only supports teleporting HTML outside your components. For example, teleporting a modal to the<body>tag is fine, but teleporting it to another element within your component will not work.
Warning! Teleporting only works with a single root element
@teleportステートメント内には、単一のルート要素のみを含めるようにしてください。[!warning] Teleporting only works with a single root element Make sure you only include a single root element inside your@teleportstatement.