Skip to content

doc: add pushToTop and pushToTopOnce docs #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bnb wants to merge 1 commit into
base: main
Choose a base branch
from
Open

doc: add pushToTop and pushToTopOnce docs #16

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 90 additions & 1 deletion content/docs/stacks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ Stacks are available from `edge.js@6.1.0`. Before you start using them, make sur

The `@stack` tag will create a named stack (it should be unique) in which other templates can push contents.

```edge

```edge
// title: components/layouts/main.edge
<!DOCTYPE html>
Expand All @@ -27,11 +29,17 @@ The `@stack` tag will create a named stack (it should be unique) in which other
</head>
<body>
<main>
// highlight-start
@stack('world')
// highlight-end
@!dialog()
</main>
</body>
</html>
```
You can interact with Stacks by using one of four tags: `@pushTo`, `@pushOnceTo`, `@pushToTop` and `@pushOnceToTop`.

Both `@pushTo` and `@pushToTop` can be used as many times as you want, and will push whatever's within the tag to the stack every time.

The `@pushOnceTo` tag will push the contents inside the earlier created stack. Since you may use the following component multiple times on a single page, we use the `pushOnceTo` tag to push the `script` tag only once. Otherwise, you will end up with multiple script tags.

Expand Down Expand Up @@ -80,4 +88,85 @@ Following will be the output HTML.
</html>
```

Similar to the `@pushToOnce` tag, there is a `@pushTo` tag as well, which will push contents inside a named stack as many times as the component or the partial gets imported.
Now let's fill out the `world` stack with some content:

```edge
// title: compontents/hello-world.edge

// highlight-start
@pushTo('world')
<p>hello!</p>
@end
// highlight-end
```

Now, our output will look like this:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
Alpine.data('alpineModal', function () {
return {
show() {},
hide() {},
}
})
</script>
</head>
<body>
<main>
<dialog x-data="alpineModal">
</dialog>
<p>hello!</p>
</main>
</body>
</html>
```

If we wanted to add something above `<p>`, we could have used `@pushToTop` instead of `@pushTo`.

```edge
// title: compontents/hello-world.edge

@pushTo('world')
<p>hello!</p>
@end

// highlight-start
@pushToTop('world')
<h1>hey!</h1>
@end
// highlight-end
```

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
Alpine.data('alpineModal', function () {
return {
show() {},
hide() {},
}
})
</script>
</head>
<body>
<main>
<dialog x-data="alpineModal">
</dialog>
<p>hey!</p>
<p>hello!</p>
</main>
</body>
</html>
```

Combining both `pushToTop` and `pushOnceTo`, `pushToTopOnce` will push the content to the top of the stack only once, even if you use it multiple times.