diff --git a/content/docs/stacks.md b/content/docs/stacks.md index 2316e9d..4be2b33 100644 --- a/content/docs/stacks.md +++ b/content/docs/stacks.md @@ -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 @@ -27,11 +29,17 @@ The `@stack` tag will create a named stack (it should be unique) in which other
+ // highlight-start + @stack('world') + // highlight-end @!dialog()
``` +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. @@ -80,4 +88,85 @@ Following will be the output 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') +

hello!

+@end +// highlight-end +``` + +Now, our output will look like this: + +```html + + + + + + + + +
+ + +

hello!

+
+ + +``` + +If we wanted to add something above `

`, we could have used `@pushToTop` instead of `@pushTo`. + +```edge +// title: compontents/hello-world.edge + +@pushTo('world') +

hello!

+@end + +// highlight-start +@pushToTop('world') +

hey!

+@end +// highlight-end +``` + +```html + + + + + + + + +
+ + +

hey!

+

hello!

+
+ + +``` + +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.