Skip to content
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.

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

add docs for turbo stream morph action #169

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
16 changes: 16 additions & 0 deletions _source/handbook/05_streams.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,22 @@ 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="morph" target="current_step" children-only>
<template>
<!-- The contents of this template will replace the
children of 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
22 changes: 22 additions & 0 deletions _source/reference/streams.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,28 @@ 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>
```

The `children-only` attribute can be added to the `turbo-stream` element to morph only the children of the element designated by the target dom id.

```html
<turbo-stream action="morph" target="dom_id" children-only>
<template>
Content to replace the element.
</template>
</turbo-stream>
```

### Refresh

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