Skip to content

Commit 508bef8

Browse files
authored
changes base en Ryan comments
1 parent 10d6b34 commit 508bef8

File tree

1 file changed

+26
-3
lines changed

1 file changed

+26
-3
lines changed

src/TwigComponent/doc/index.rst

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -870,14 +870,34 @@ You can now use a custom tag prefix starting by <twig: and your component name
870870
// and also self closing tag
871871
<twig:Alert/>
872872

873-
You can pass an attribute to your component like any HTML attribute and also use the ':'
874-
prefix to your attribute to indicate that the value should be compiled by Twig
873+
You can pass an attribute to your component like any HTML attribute
875874

876875
.. code-block:: html+twig
877876

878877
// Warning will be set to true
879878
<twig:Alert warning></:Alert>
880879

880+
<twig:Alert message="hello" :user="user"/>
881+
882+
//camel camelCase works too for your properties names
883+
<twig:Alert withActions message="hello" :user="user" />
884+
885+
And then as usual you can access your properties in your component template
886+
887+
.. code-block:: html+twig
888+
889+
{# templates/components/Alert.html.twig #}
890+
891+
<div class={{ warnings ? 'warnings' : 'success' }}>
892+
<p>{{ message }}</p>
893+
...
894+
</div>
895+
896+
You can add the ':' prefix to your attribute to indicate that the value
897+
should be compiled by Twig
898+
899+
.. code-block:: html+twig
900+
881901
<twig:Alert message="hello" :user="user.id"/>
882902

883903
// equal to
@@ -898,14 +918,17 @@ You can pass content directly inside your component.
898918
</div>
899919
</twig:Alert>
900920

901-
Then in your component template, you can access the content put into your component:
921+
Then in your component template, This becomes a block called content:
902922

903923
.. code-block:: html+twig
904924

905925
<div class="content">
906926
{% block content %}
907927
// and the content will appear in here
908928
{% endblock %}
929+
{% block footer %}
930+
...
931+
{% block footer %}
909932
</div>
910933

911934

0 commit comments

Comments
 (0)