Skip to content

Commit cb09dd8

Browse files
smnandresmnandre
committed
minor #2481 [Turbo] Document <twig:Turbo:Stream:*> (seb-jean, smnandre)
This PR was merged into the 2.x branch. Discussion ---------- [Turbo] Document `<twig:Turbo:Stream:*>` Hi, I added docs for #2227. I will document `<twig:Turbo:Stream>` in a second phase. What do you think? Do you have any suggestions? Close #2315 Commits ------- f572ab5 Update src/Turbo/doc/index.rst 79a0180 Remove too many links 8441ec3 Document <twig:Turbo:Stream:*>
2 parents 5487937 + f572ab5 commit cb09dd8

File tree

1 file changed

+164
-6
lines changed

1 file changed

+164
-6
lines changed

‎src/Turbo/doc/index.rst

+164-6
Original file line numberDiff line numberDiff line change
@@ -388,19 +388,177 @@ Let's discover how to use Turbo Streams to enhance your `Symfony forms`_::
388388

389389
{# bottom of new.html.twig #}
390390
{% block success_stream %}
391-
<turbo-stream action="replace" targets="#my_div_id">
392-
<template>
393-
The element having the id "my_div_id" will be replaced by this block, without a full page reload!
391+
<turbo-stream action="replace" targets="#my_div_id">
392+
<template>
393+
The element having the id "my_div_id" will be replaced by this block, without a full page reload!
394394

395-
<div>The task "{{ task }}" has been created!</div>
396-
</template>
397-
</turbo-stream>
395+
<div>The task "{{ task }}" has been created!</div>
396+
</template>
397+
</turbo-stream>
398398
{% endblock %}
399399

400400
Supported actions are ``append``, ``prepend``, ``replace``, ``update``,
401401
``remove``, ``before``, ``after`` and ``refresh``.
402402
`Read the Turbo Streams documentation for more details`_.
403403

404+
Stream Messages and Actions
405+
^^^^^^^^^^^^^^^^^^^^^^^^^^^
406+
407+
To render a ``<turbo-stream>`` element, this bundle provides a set of ``<twig:Turbo:Stream:*>`` Twig Components. These components make it easy to inject content directly into the ``<template>`` tag, pass attributes, and set the desired morphing mode with a clear and consistent syntax.
408+
409+
Append
410+
""""""
411+
412+
.. code-block:: html+twig
413+
414+
<twig:Turbo:Stream:Append target="#dom_id">
415+
Content to append to container designated with the dom_id.
416+
</twig:Turbo:Stream:Append>
417+
418+
{# renders as: #}
419+
<turbo-stream action="append" targets="#dom_id">
420+
<template>
421+
Content to append to container designated with the dom_id.
422+
</template>
423+
</turbo-stream>
424+
425+
Prepend
426+
"""""""
427+
428+
.. code-block:: html+twig
429+
430+
<twig:Turbo:Stream:Prepend target="#dom_id">
431+
Content to prepend to container designated with the dom_id.
432+
</twig:Turbo:Stream:Prepend>
433+
434+
{# renders as: #}
435+
<turbo-stream action="prepend" targets="#dom_id">
436+
<template>
437+
Content to prepend to container designated with the dom_id.
438+
</template>
439+
</turbo-stream>
440+
441+
Replace
442+
"""""""
443+
444+
.. code-block:: html+twig
445+
446+
<twig:Turbo:Stream:Replace target="#dom_id">
447+
Content to replace the element designated with the dom_id.
448+
</twig:Turbo:Stream:Replace>
449+
450+
{# renders as: #}
451+
<turbo-stream action="replace" targets="#dom_id">
452+
<template>
453+
Content to replace the element designated with the dom_id.
454+
</template>
455+
</turbo-stream>
456+
457+
.. code-block:: html+twig
458+
459+
{# with morphing #}
460+
<twig:Turbo:Stream:Replace target="#dom_id" morph>
461+
Content to replace the element.
462+
</twig:Turbo:Stream:Replace>
463+
464+
{# renders as: #}
465+
<turbo-stream action="replace" targets="#dom_id" method="morph">
466+
<template>
467+
Content to replace the element.
468+
</template>
469+
</turbo-stream>
470+
471+
Update
472+
""""""
473+
474+
.. code-block:: html+twig
475+
476+
<twig:Turbo:Stream:Update target="#dom_id">
477+
Content to update to container designated with the dom_id.
478+
</twig:Turbo:Stream:Update>
479+
480+
{# renders as: #}
481+
<turbo-stream action="update" targets="#dom_id">
482+
<template>
483+
Content to update to container designated with the dom_id.
484+
</template>
485+
</turbo-stream>
486+
487+
.. code-block:: html+twig
488+
489+
{# with morphing #}
490+
<twig:Turbo:Stream:Update target="#dom_id" morph>
491+
Content to replace the element.
492+
</twig:Turbo:Stream:Update>
493+
494+
{# renders as: #}
495+
<turbo-stream action="update" targets="#dom_id" method="morph">
496+
<template>
497+
Content to replace the element.
498+
</template>
499+
</turbo-stream>
500+
501+
Remove
502+
""""""
503+
504+
.. code-block:: html+twig
505+
506+
<twig:Turbo:Stream:Remove target="#dom_id" />
507+
508+
{# renders as: #}
509+
<turbo-stream action="remove" targets="#dom_id"></turbo-stream>
510+
511+
Before
512+
""""""
513+
514+
.. code-block:: html+twig
515+
516+
<twig:Turbo:Stream:Before target="#dom_id">
517+
Content to place before the element designated with the dom_id.
518+
</twig:Turbo:Stream:Before>
519+
520+
{# renders as: #}
521+
<turbo-stream action="before" targets="#dom_id">
522+
<template>
523+
Content to place before the element designated with the dom_id.
524+
</template>
525+
</turbo-stream>
526+
527+
After
528+
"""""
529+
530+
.. code-block:: html+twig
531+
532+
<twig:Turbo:Stream:Refresh target="#dom_id">
533+
Content to place after the element designated with the dom_id.
534+
</twig:Turbo:Stream:After>
535+
536+
{# renders as: #}
537+
<turbo-stream action="after" targets="#dom_id">
538+
<template>
539+
Content to place after the element designated with the dom_id.
540+
</template>
541+
</turbo-stream>
542+
543+
Refresh
544+
"""""""
545+
546+
.. code-block:: html+twig
547+
548+
{# without [request-id] #}
549+
<twig:Turbo:Stream:Refresh />
550+
551+
{# renders as: #}
552+
<turbo-stream action="refresh"></turbo-stream>
553+
554+
.. code-block:: html+twig
555+
556+
{# debounced with [request-id] #}
557+
<twig:Turbo:Stream:Refresh requestId="abcd-1234" />
558+
559+
{# renders as: #}
560+
<turbo-stream action="refresh" request-id="abcd-1234"></turbo-stream>
561+
404562
Resetting the Form
405563
~~~~~~~~~~~~~~~~~~
406564

0 commit comments

Comments
 (0)