Skip to content

Commit 5825558

Browse files
committed
[Doc] Minor syntax fix in Twig Components docs
1 parent b066280 commit 5825558

File tree

1 file changed

+30
-30
lines changed

1 file changed

+30
-30
lines changed

src/TwigComponent/doc/index.rst

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1004,46 +1004,46 @@ You can take full control over the attributes that are rendered by using the
10041004

10051005
There are a few important things to know about using ``render()``:
10061006

1007-
1. You need to be sure to call your ``render()`` methods before calling ``{{ attributes }}`` or some
1007+
#. You need to be sure to call your ``render()`` methods before calling ``{{ attributes }}`` or some
10081008
attributes could be rendered twice. For instance:
10091009

1010-
.. code-block:: html+twig
1010+
.. code-block:: html+twig
10111011

1012-
{# templates/components/MyComponent.html.twig #}
1013-
<div
1014-
{{ attributes }} {# called before style is rendered #}
1015-
style="{{ attributes.render('style') }} display:block;"
1016-
>
1017-
My Component!
1018-
</div>
1012+
{# templates/components/MyComponent.html.twig #}
1013+
<div
1014+
{{ attributes }} {# called before style is rendered #}
1015+
style="{{ attributes.render('style') }} display:block;"
1016+
>
1017+
My Component!
1018+
</div>
10191019

1020-
{# render component #}
1021-
{{ component('MyComponent', { style: 'color:red;' }) }}
1020+
{# render component #}
1021+
{{ component('MyComponent', { style: 'color:red;' }) }}
10221022

1023-
{# renders as: #}
1024-
<div style="color:red;" style="color:red; display:block;"> {# style is rendered twice! #}
1025-
My Component!
1026-
</div>
1023+
{# renders as: #}
1024+
<div style="color:red;" style="color:red; display:block;"> {# style is rendered twice! #}
1025+
My Component!
1026+
</div>
10271027

1028-
2. If you add an attribute without calling ``render()``, it will be rendered twice. For instance:
1028+
#. If you add an attribute without calling ``render()``, it will be rendered twice. For instance:
10291029

1030-
.. code-block:: html+twig
1030+
.. code-block:: html+twig
10311031

1032-
{# templates/components/MyComponent.html.twig #}
1033-
<div
1034-
style="display:block;" {# not calling attributes.render('style') #}
1035-
{{ attributes }}
1036-
>
1037-
My Component!
1038-
</div>
1032+
{# templates/components/MyComponent.html.twig #}
1033+
<div
1034+
style="display:block;" {# not calling attributes.render('style') #}
1035+
{{ attributes }}
1036+
>
1037+
My Component!
1038+
</div>
10391039

1040-
{# render component #}
1041-
{{ component('MyComponent', { style: 'color:red;' }) }}
1040+
{# render component #}
1041+
{{ component('MyComponent', { style: 'color:red;' }) }}
10421042

1043-
{# renders as: #}
1044-
<div style="display:block;" style="color:red;"> {# style is rendered twice! #}
1045-
My Component!
1046-
</div>
1043+
{# renders as: #}
1044+
<div style="display:block;" style="color:red;"> {# style is rendered twice! #}
1045+
My Component!
1046+
</div>
10471047

10481048
Only
10491049
~~~~

0 commit comments

Comments
 (0)