You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: package/README.md
+11-10Lines changed: 11 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@
6
6
7
7
`vue-simple-portal` allows you to mount its slot content to the very end of the body element (or potentially any other DOM element on the page) as an immediate child.
8
8
9
-
Its main usecase are components/elements that need to be positioned absolutely relative to the document/viewport, or fixed in some way or another, like:
9
+
Its main use case are components/elements that need to be positioned absolutely relative to the document/viewport, or fixed in some way or another, like:
10
10
11
11
* modals
12
12
* drodowns
@@ -31,14 +31,15 @@ Minimal example:
31
31
32
32
<script>
33
33
newVue({
34
+
el:'#app',
34
35
template:`
35
36
<div>
36
37
<portal selector="#portal-target">
37
38
<p>This will be mounted as a child element
38
39
of <div id="portal-parget"> instead of
39
40
somewhere inside the child tree of <div id="app">
40
41
</portal>
41
-
<div>
42
+
</div>
42
43
`
43
44
})
44
45
</script>
@@ -55,7 +56,7 @@ _Why publish another Portal component?_
55
56
56
57
Well, `portal-vue` was my first successful library, and I wanted it to be _awesome_, so I packed it full of features to portal _anything_ to _anywhere_, _anytime_ you want.
57
58
58
-
That turned out pretty well, but also means the library is not exactly *tiny* anymore, and there also were a few issues that I found over time, so I wrote a smaller lib that adresses these issues while sliming down on features and (= bundle size) in order to concentrate on the main use case.
59
+
That turned out pretty well, but also means the library is not exactly *tiny* anymore, and there also were a few issues that I found over time, so I wrote a smaller lib that addresses these issues while slimming down on features and (= bundle size) in order to concentrate on the main use case.
59
60
60
61
<details>
61
62
<summary>
@@ -99,7 +100,7 @@ This will make the `<portal>` component available globally, but also make the po
99
100
100
101
```javascript
101
102
// main.js
102
-
importVuefrom'vue'//reuqires Vue >= 2.6
103
+
importVuefrom'vue'//requires Vue >= 2.6
103
104
importVuePortalfrom'@linusborg/vue-simple-portal'
104
105
105
106
Vue.use(VuePortal, {
@@ -168,7 +169,7 @@ Vue.use(VuePortal, {
168
169
If you don't want to install the plugin globally, you can use the `setSelector` helper:
@@ -186,7 +187,7 @@ A query selector that defines the **target element** to which to append the cont
186
187
187
188
If no selector is given, a random default selector (created at startup) is used.
188
189
189
-
I no element matches the selector, a new element is created and appended to `<body>`
190
+
If no element matches the selector, a new element is created and appended to `<body>`
190
191
191
192
Consequently, this means that using the `<portal>` without a `selector` prop will always append to a div at the end of the `<body>` element, which is a sensible default for the goal of this plugin.
192
193
@@ -214,7 +215,7 @@ Set the `prepend` prop if you want to *prepend* the content instead.
214
215
|------|-------|------|
215
216
|String|no |'DIV' |
216
217
217
-
When the content of `<poral>` is appended to the target element, it's actually wrapped in a small, transparent component (for technical reasons). Like all (*non-functional*) components in Vue, it requires a single root element.
218
+
When the content of `<portal>` is appended to the target element, it's actually wrapped in a small, transparent component (for technical reasons). Like all (*non-functional*) components in Vue, it requires a single root element.
218
219
219
220
The `tag` prop can be used to define what that element should be.
220
221
@@ -261,7 +262,7 @@ If you need to remove or disable the portal *after* a transition has finished, y
261
262
}),
262
263
methods: {
263
264
getOut() {
264
-
// calling this method this will trigger the transition,
265
+
// calling this method will trigger the transition,
265
266
// which when finished, will disable the Portal
266
267
// through the `afterLeave` hook callback
267
268
this.showTransitionContent=false
@@ -274,7 +275,7 @@ If you need to remove or disable the portal *after* a transition has finished, y
274
275
275
276
Of course this only works if you actually can listen to the events of the `<transition>`, and could be problematic or even impossible with 3rd-Party components, depending on their implementations.
276
277
277
-
As a last resort you can always use a Timeout if yu know the duration of the leave transition.
278
+
As a last resort you can always use a Timeout if you know the duration of the leave transition.
278
279
279
280
</details>
280
281
@@ -284,7 +285,7 @@ If the slot content of the `<portal>` contains components, they will show up as
284
285
285
286
### Targeting elements inside of your Vue app
286
287
287
-
The general advise is to only mount to elements *outside* of your Vue app, as that's the prime use case of this library. If you need to mount to locations *inside of* your app, consider using [portal-vue](https://portal-vue.linusb.org) instead.
288
+
The general advice is to only mount to elements *outside* of your Vue app, as that's the prime use case of this library. If you need to mount to locations *inside of* your app, consider using [portal-vue](https://portal-vue.linusb.org) instead.
288
289
289
290
That being said, you *can* move content to an element that is controlled by Vue, i.e. is part of the template of some other component.
0 commit comments