Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit 71dfef6

Browse filesBrowse files
committed
Merge branch 'develop' of github.com:LinusBorg/vue-simple-portal into develop
2 parents fe03a3f + 845365a commit 71dfef6
Copy full SHA for 71dfef6

File tree

Expand file treeCollapse file tree

1 file changed

+11
-10
lines changed
Filter options
Expand file treeCollapse file tree

1 file changed

+11
-10
lines changed

‎package/README.md

Copy file name to clipboardExpand all lines: package/README.md
+11-10Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
`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.
88

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:
1010

1111
* modals
1212
* drodowns
@@ -31,14 +31,15 @@ Minimal example:
3131

3232
<script>
3333
new Vue({
34+
el: '#app',
3435
template: `
3536
<div>
3637
<portal selector="#portal-target">
3738
<p>This will be mounted as a child element
3839
of <div id="portal-parget"> instead of
3940
somewhere inside the child tree of <div id="app">
4041
</portal>
41-
<div>
42+
</div>
4243
`
4344
})
4445
</script>
@@ -55,7 +56,7 @@ _Why publish another Portal component?_
5556

5657
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.
5758

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.
5960

6061
<details>
6162
<summary>
@@ -99,7 +100,7 @@ This will make the `<portal>` component available globally, but also make the po
99100

100101
```javascript
101102
// main.js
102-
import Vue from 'vue' // reuqires Vue >= 2.6
103+
import Vue from 'vue' // requires Vue >= 2.6
103104
import VuePortal from '@linusborg/vue-simple-portal'
104105

105106
Vue.use(VuePortal, {
@@ -168,7 +169,7 @@ Vue.use(VuePortal, {
168169
If you don't want to install the plugin globally, you can use the `setSelector` helper:
169170

170171
```javascript
171-
import { setSelector } from '@œlinusborg/vue-simple-portal'
172+
import { setSelector } from '@linusborg/vue-simple-portal'
172173
setSelector('#your-target')
173174
```
174175

@@ -186,7 +187,7 @@ A query selector that defines the **target element** to which to append the cont
186187

187188
If no selector is given, a random default selector (created at startup) is used.
188189

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>`
190191

191192
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.
192193

@@ -214,7 +215,7 @@ Set the `prepend` prop if you want to *prepend* the content instead.
214215
|------|-------|------|
215216
|String|no |'DIV' |
216217

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.
218219

219220
The `tag` prop can be used to define what that element should be.
220221

@@ -261,7 +262,7 @@ If you need to remove or disable the portal *after* a transition has finished, y
261262
}),
262263
methods: {
263264
getOut() {
264-
// calling this method this will trigger the transition,
265+
// calling this method will trigger the transition,
265266
// which when finished, will disable the Portal
266267
// through the `afterLeave` hook callback
267268
this.showTransitionContent = false
@@ -274,7 +275,7 @@ If you need to remove or disable the portal *after* a transition has finished, y
274275

275276
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.
276277

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.
278279

279280
</details>
280281

@@ -284,7 +285,7 @@ If the slot content of the `<portal>` contains components, they will show up as
284285

285286
### Targeting elements inside of your Vue app
286287

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.
288289

289290
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.
290291

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.