Skip to content

Commit 8441ec3

Browse files
seb-jeanseb-jean
authored
Document <twig:Turbo:Stream:*>
1 parent ad8ac6a commit 8441ec3

File tree

1 file changed

+180
-6
lines changed

1 file changed

+180
-6
lines changed

‎src/Turbo/doc/index.rst

Lines changed: 180 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -394,19 +394,193 @@ Let's discover how to use Turbo Streams to enhance your `Symfony forms`_::
394394

395395
{# bottom of new.html.twig #}
396396
{% block success_stream %}
397-
<turbo-stream action="replace" targets="#my_div_id">
398-
<template>
399-
The element having the id "my_div_id" will be replaced by this block, without a full page reload!
397+
<turbo-stream action="replace" targets="#my_div_id">
398+
<template>
399+
The element having the id "my_div_id" will be replaced by this block, without a full page reload!
400400

401-
<div>The task "{{ task }}" has been created!</div>
402-
</template>
403-
</turbo-stream>
401+
<div>The task "{{ task }}" has been created!</div>
402+
</template>
403+
</turbo-stream>
404404
{% endblock %}
405405

406406
Supported actions are ``append``, ``prepend``, ``replace``, ``update``,
407407
``remove``, ``before``, ``after`` and ``refresh``.
408408
`Read the Turbo Streams documentation for more details`_.
409409

410+
Stream Messages and Actions
411+
^^^^^^^^^^^^^^^^^^^^^^^^^^^
412+
413+
To render a ``<turbo-stream>`` element, we recommend using the ``<twig:Turbo:Stream:*>`` Twig Component to avoid typos.
414+
415+
Append
416+
""""""
417+
418+
.. code-block:: html+twig
419+
420+
<twig:Turbo:Stream:Append target="#dom_id">
421+
Content to append to container designated with the dom_id.
422+
</twig:Turbo:Stream:Append>
423+
424+
{# renders as: #}
425+
<turbo-stream action="append" targets="#dom_id">
426+
<template>
427+
Content to append to container designated with the dom_id.
428+
</template>
429+
</turbo-stream>
430+
431+
For more info, see: `Turbo Streams - Append <https://turbo.hotwired.dev/reference/streams#append>`_.
432+
433+
Prepend
434+
"""""""
435+
436+
.. code-block:: html+twig
437+
438+
<twig:Turbo:Stream:Prepend target="#dom_id">
439+
Content to prepend to container designated with the dom_id.
440+
</twig:Turbo:Stream:Prepend>
441+
442+
{# renders as: #}
443+
<turbo-stream action="prepend" targets="#dom_id">
444+
<template>
445+
Content to prepend to container designated with the dom_id.
446+
</template>
447+
</turbo-stream>
448+
449+
For more info, see: `Turbo Streams - Prepend <https://turbo.hotwired.dev/reference/streams#prepend>`_.
450+
451+
Replace
452+
"""""""
453+
454+
.. code-block:: html+twig
455+
456+
<twig:Turbo:Stream:Replace target="#dom_id">
457+
Content to replace the element designated with the dom_id.
458+
</twig:Turbo:Stream:Replace>
459+
460+
{# renders as: #}
461+
<turbo-stream action="replace" targets="#dom_id">
462+
<template>
463+
Content to replace the element designated with the dom_id.
464+
</template>
465+
</turbo-stream>
466+
467+
.. code-block:: html+twig
468+
469+
{# with morphing #}
470+
<twig:Turbo:Stream:Replace target="#dom_id" morph>
471+
Content to replace the element.
472+
</twig:Turbo:Stream:Replace>
473+
474+
{# renders as: #}
475+
<turbo-stream action="replace" targets="#dom_id" method="morph">
476+
<template>
477+
Content to replace the element.
478+
</template>
479+
</turbo-stream>
480+
481+
For more info, see: `Turbo Streams - Replace <https://turbo.hotwired.dev/reference/streams#replace>`_.
482+
483+
Update
484+
""""""
485+
486+
.. code-block:: html+twig
487+
488+
<twig:Turbo:Stream:Update target="#dom_id">
489+
Content to update to container designated with the dom_id.
490+
</twig:Turbo:Stream:Update>
491+
492+
{# renders as: #}
493+
<turbo-stream action="update" targets="#dom_id">
494+
<template>
495+
Content to update to container designated with the dom_id.
496+
</template>
497+
</turbo-stream>
498+
499+
.. code-block:: html+twig
500+
501+
{# with morphing #}
502+
<twig:Turbo:Stream:Update target="#dom_id" morph>
503+
Content to replace the element.
504+
</twig:Turbo:Stream:Update>
505+
506+
{# renders as: #}
507+
<turbo-stream action="update" targets="#dom_id" method="morph">
508+
<template>
509+
Content to replace the element.
510+
</template>
511+
</turbo-stream>
512+
513+
For more info, see: `Turbo Streams - Update <https://turbo.hotwired.dev/reference/streams#update>`_.
514+
515+
Remove
516+
""""""
517+
518+
.. code-block:: html+twig
519+
520+
<twig:Turbo:Stream:Remove target="#dom_id" />
521+
522+
{# renders as: #}
523+
<turbo-stream action="remove" targets="#dom_id"></turbo-stream>
524+
525+
For more info, see: `Turbo Streams - Remove <https://turbo.hotwired.dev/reference/streams#remove>`_.
526+
527+
Before
528+
""""""
529+
530+
.. code-block:: html+twig
531+
532+
<twig:Turbo:Stream:Before target="#dom_id">
533+
Content to place before the element designated with the dom_id.
534+
</twig:Turbo:Stream:Before>
535+
536+
{# renders as: #}
537+
<turbo-stream action="before" targets="#dom_id">
538+
<template>
539+
Content to place before the element designated with the dom_id.
540+
</template>
541+
</turbo-stream>
542+
543+
For more info, see: `Turbo Streams - Before <https://turbo.hotwired.dev/reference/streams#before>`_.
544+
545+
After
546+
"""""
547+
548+
.. code-block:: html+twig
549+
550+
<twig:Turbo:Stream:Refresh target="#dom_id">
551+
Content to place after the element designated with the dom_id.
552+
</twig:Turbo:Stream:After>
553+
554+
{# renders as: #}
555+
<turbo-stream action="after" targets="#dom_id">
556+
<template>
557+
Content to place after the element designated with the dom_id.
558+
</template>
559+
</turbo-stream>
560+
561+
For more info, see: `Turbo Streams - After <https://turbo.hotwired.dev/reference/streams#after>`_.
562+
563+
Refresh
564+
"""""""
565+
566+
.. code-block:: html+twig
567+
568+
{# without [request-id] #}
569+
<twig:Turbo:Stream:Refresh />
570+
571+
{# renders as: #}
572+
<turbo-stream action="refresh"></turbo-stream>
573+
574+
.. code-block:: html+twig
575+
576+
{# debounced with [request-id] #}
577+
<twig:Turbo:Stream:Refresh requestId="abcd-1234" />
578+
579+
{# renders as: #}
580+
<turbo-stream action="refresh" request-id="abcd-1234"></turbo-stream>
581+
582+
For more info, see: `Turbo Streams - Refresh <https://turbo.hotwired.dev/reference/streams#refresh>`_.
583+
410584
Resetting the Form
411585
~~~~~~~~~~~~~~~~~~
412586

0 commit comments

Comments
 (0)