Skip to content

Commit

Permalink
Update README
Browse files Browse the repository at this point in the history
  • Loading branch information
hirasso committed Jun 12, 2023
1 parent d6114a4 commit 38b61de
Showing 1 changed file with 6 additions and 5 deletions.
11 changes: 6 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ npm i swup/fragment-plugin --save
## Example

The following code will replace:
1. **only** the element `#users-list` when filtering a list of users and
2. **only** the element `#user-profile` when clicking on one of the users in the list
1. **only** the element `#users-list` when filtering a list of users
2. **only** the element `#user-overlay` when clicking on one of the users in the list
3. **only** the element `#user-overlay__content` when navigating between users

```js
Expand All @@ -28,7 +28,7 @@ const swup = new Swup({
// The plugin expects an array of rules
rules: [
{
// Rule 1: Between either the root or any filtered state... (required)
// Rule 1: Between either all users or any filtered state... (required)
from: [
"/users/",
"/users/filter/:filter"
Expand Down Expand Up @@ -105,13 +105,14 @@ html[data-fragment-visit=overlay][data-fragment-direction=forwards].is-leaving .

### Rule Matching

- Rules are being matched in **both** directions, forwards as well as backwards
- The last matching rule in your rules array will be selected for the current transition
- By default, rules are being matched in **both** directions, forwards as well as backwards. This can be customized by adding an option `direction` with either `forwards` or `backwards`
- The first matching rule in your rules array will be used for the current transition

### Fragments

- The fragments from the selected rule need to be present in **both the current and the incoming document**
- For each `fragments` entry, the first matching element in the DOM will be selected
- You can opt-out from replacing a fragment by giving both the incoming and current fragment the same `data-fragment-hash`

## Animations for fragments

Expand Down

0 comments on commit 38b61de

Please sign in to comment.