Skip to content

Commit 1ac44df

Browse files
authored
Update block-content.md
1 parent a07779b commit 1ac44df

File tree

1 file changed

+11
-9
lines changed

1 file changed

+11
-9
lines changed

guides/release/components/block-content.md

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -333,14 +333,16 @@ If you want to yield content to different spots in the same component, you can u
333333
You could also want to pass some values. This is the same process as the default `yield`, but you just have to pass `to` as the last argument. An example would be the popover:
334334

335335
```handlebars {data-filename=app/components/popover.hbs}
336-
<div class="popover">
337-
<div class="popover__trigger">
338-
{{yield this.isOpen to="trigger"}}
339-
</div>
340-
<div class="popover__content">
341-
{{yield this.isOpen to="content"}}
336+
<div class="popover">
337+
<div class="popover__trigger">
338+
{{yield this.isOpen to="trigger"}}
339+
</div>
340+
{{#if this.isOpen}}
341+
<div class="popover__content">
342+
{{yield to="content"}}
343+
</div>
344+
{{/if}}
342345
</div>
343-
</div>
344346
```
345347

346348
If we hadn’t named blocks, we would certainly have to pass components as `args` to the popover. But this is much more practical!
@@ -350,7 +352,7 @@ Here’s how we would call it:
350352
```handlebars
351353
<Popover>
352354
<:trigger as |open|>
353-
<button>Click to {{if open "close" "open"}} the popover!</button>
355+
<button type="button">Click to {{if open "close" "open"}} the popover!</button>
354356
</:trigger>
355357
<:content>
356358
This is what is showed when I'm opened!
@@ -366,7 +368,7 @@ That would give this result:
366368
<!-- rendered -->
367369
<div class="popover">
368370
<div class="popover__trigger">
369-
<button>Click to open the popover!</button>
371+
<button type="button">Click to close the popover!</button>
370372
</div>
371373
<div class="popover__content">
372374
This is what is showed when I'm opened!

0 commit comments

Comments
 (0)