@alpinejs/docs 3.7.0-revision.1 → 3.7.0-revision.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@ graph_image: https://alpinejs.dev/social_teleport.jpg
|
|
|
7
7
|
|
|
8
8
|
# Teleport Plugin
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
The `x-teleport` directive allows you to transport part of your Alpine template to another part of the DOM on the page entirely.
|
|
11
11
|
|
|
12
12
|
This is useful for things like modals (especially nesting them), where it's helpful to break out of the z-index of the current Alpine component.
|
|
13
13
|
|
|
@@ -61,11 +61,11 @@ Notice how when toggling the modal, the actual modal contents show up AFTER the
|
|
|
61
61
|
<a name="forwarding-events"></a>
|
|
62
62
|
## Forwarding events
|
|
63
63
|
|
|
64
|
-
Alpine tries it's best to make the experience of
|
|
64
|
+
Alpine tries it's best to make the experience of teleporting seamless. Anything you would normally do in a template, you should be able to do inside an `x-teleport` template. Teleported content can access the normal Alpine scope of the component as well as other features like `$refs`, `$root`, etc...
|
|
65
65
|
|
|
66
66
|
However, native DOM events have no concept of teleportation, so if, for example, you trigger a "click" event from inside a teleported element, that event will bubble up the DOM tree as it normally would.
|
|
67
67
|
|
|
68
|
-
To make this experience more
|
|
68
|
+
To make this experience more seamless, you can "forward" events by simply registering event listeners on the `<template x-teleport...>` element itself like so:
|
|
69
69
|
|
|
70
70
|
```alpine
|
|
71
71
|
<div x-data="{ open: false }">
|
package/src/en/start-here.md
CHANGED
|
@@ -88,7 +88,7 @@ You can listen for other events as you'd imagine. For example, listening for a `
|
|
|
88
88
|
|
|
89
89
|
When a `click` event happens, Alpine will call the associated JavaScript expression, `count++` in our case. As you can see, we have direct access to data declared in the `x-data` expression.
|
|
90
90
|
|
|
91
|
-
> You will often see `@` instead of `x-on
|
|
91
|
+
> You will often see `@` instead of `x-on:`. This is a shorter, friendlier syntax that many prefer. From now on, this documentation will likely use `@` instead of `x-on:`.
|
|
92
92
|
|
|
93
93
|
[→ Read more about `x-on`](/directives/on)
|
|
94
94
|
|