@@ -870,14 +870,34 @@ You can now use a custom tag prefix starting by <twig: and your component name
870
870
// and also self closing tag
871
871
<twig:Alert/>
872
872
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
875
874
876
875
.. code-block :: html+twig
877
876
878
877
// Warning will be set to true
879
878
<twig:Alert warning></:Alert>
880
879
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
+
881
901
<twig:Alert message="hello" :user="user.id"/>
882
902
883
903
// equal to
@@ -898,14 +918,17 @@ You can pass content directly inside your component.
898
918
</div>
899
919
</twig:Alert>
900
920
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 :
902
922
903
923
.. code-block :: html+twig
904
924
905
925
<div class="content">
906
926
{% block content %}
907
927
// and the content will appear in here
908
928
{% endblock %}
929
+ {% block footer %}
930
+ ...
931
+ {% block footer %}
909
932
</div>
910
933
911
934
0 commit comments