Skip to content

Commit

Permalink
add docs for turbo stream morph action
Browse files Browse the repository at this point in the history
  • Loading branch information
omarluq committed Mar 15, 2024
1 parent 692c6ff commit 99401c2
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 0 deletions.
8 changes: 8 additions & 0 deletions _source/handbook/05_streams.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,14 @@ A Turbo Streams message is a fragment of HTML consisting of `<turbo-stream>` ele
</template>
</turbo-stream>

<turbo-stream action="morph" target="current_step">
<template>
<!-- The contents of this template will replace the
element with ID "current_step" via morph. -->
<li>New item</li>
</template>
</turbo-stream>

<turbo-stream action="refresh" request-id="abcd-1234"></turbo-stream>
```

Expand Down
13 changes: 13 additions & 0 deletions _source/reference/streams.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,19 @@ Inserts the content within the template tag after the element designated by the
</turbo-stream>
```

### Morph

Replaces the element designated by the target dom id via morph.

```html
<turbo-stream action="morph" target="dom_id">
<template>
Content to replace the element.
</template>
</turbo-stream>
```
Also accepts a `data-turbo-morph-style="innerHTML"` attribute to morph the inner content of the element designated with the dom_id only.

### Refresh

Initiates a [Page Refresh](/handbook/page_refreshes) to render new content with
Expand Down

0 comments on commit 99401c2

Please sign in to comment.