Skip to content

Commit

Permalink
chore: remove reference to legacy template call expression (#280)
Browse files Browse the repository at this point in the history
  • Loading branch information
joerdav authored Nov 3, 2023
1 parent ba7a09e commit 0d7a8e3
Showing 1 changed file with 28 additions and 21 deletions.
49 changes: 28 additions & 21 deletions docs/docs/03-syntax-and-usage/09-template-composition.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,17 +66,21 @@ The use of the `{ children... }` expression in the child component.

# Components as parameters

Components can also be passed as parameters and rendered using the `{! component }` expression.
Components can also be passed as parameters and rendered using the `@component` expression.

```templ
package main
templ layout(l, r templ.Component) {
<div id="left">
{! l }
templ heading() {
<h1>Heading</h1>
}
templ layout(contents templ.Component) {
<div id="heading">
@heading()
</div>
<div id="right">
{! r }
<div id="contents">
@contents
</div>
}
Expand All @@ -94,18 +98,17 @@ import (
)

func main() {
l := paragraph("Left contents")
r := paragraph("Right contents")
layout(l, r).Render(context.Background(), os.Stdout)
c := paragraph("Dynamic contents")
layout(c).Render(context.Background(), os.Stdout)
}
```

```html title="output"
<div id="left">
<p>Left contents</p>
<div id="heading">
<h1>Heading</h1>
</div>
<div id="right">
<p>Right contents</p>
<p>Dynamic contents</p>
</div>
```

Expand All @@ -114,12 +117,16 @@ You can pass `templ` components as parameters to other components within templat
```templ
package main
templ layout(l, r templ.Component) {
<div id="left">
{! l }
templ heading() {
<h1>Heading</h1>
}
templ layout(contents templ.Component) {
<div id="heading">
@heading()
</div>
<div id="right">
{! r }
<div id="contents">
@contents
</div>
}
Expand All @@ -128,7 +135,7 @@ templ paragraph(contents string) {
}
templ root() {
@layout(paragraph("Left contents"), paragraph("Right contents"))
@layout(paragraph("Dynamic contents"))
}
```

Expand All @@ -146,10 +153,10 @@ func main() {
```

```html title="output"
<div id="left">
<p>Left contents</p>
<div id="heading">
<h1>Heading</h1>
</div>
<div id="right">
<p>Right contents</p>
<p>Dynamic contents</p>
</div>
```

0 comments on commit 0d7a8e3

Please sign in to comment.