diff --git a/_source/handbook/05_streams.md b/_source/handbook/05_streams.md index 8b50944..0cfc74e 100644 --- a/_source/handbook/05_streams.md +++ b/_source/handbook/05_streams.md @@ -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> ``` diff --git a/_source/reference/streams.md b/_source/reference/streams.md index e6953fe..b065a2b 100644 --- a/_source/reference/streams.md +++ b/_source/reference/streams.md @@ -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