Skip to content

Commit ddf0222

Browse files
committed
minor #3132 Document how to define mandatory/default props (alexislefebvre)
This PR was merged into the 2.x branch. Discussion ---------- Document how to define mandatory/default props | Q | A | -------------- | --- | Bug fix? | no | New feature? | no | Deprecations? | no | Documentation? | yes | Issues | - | License | MIT Here is a “trick” to define default values for anonymous components. Commits ------- 7df6a4e [TwigComponent] Document how to define mandatory/default props
2 parents 6e50db2 + 7df6a4e commit ddf0222

File tree

1 file changed

+17
-2
lines changed

1 file changed

+17
-2
lines changed

src/TwigComponent/doc/index.rst

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -700,12 +700,14 @@ You can also pass a variable (prop) into your template:
700700
</div>
701701

702702
To tell the system that ``icon`` and ``type`` are props and not attributes, use the
703-
``{% props %}`` tag at the top of your template.
703+
``{% props %}`` tag at the top of your template. Props are required by default, but
704+
it is possible to set a default value with ``=``:
704705

705706
.. code-block:: html+twig
706707

707708
{# templates/components/Button.html.twig #}
708-
{% props icon = null, type = 'primary' %}
709+
{# prop "icon" is required, but prop "type" has a default value to "primary" #}
710+
{% props icon, type = 'primary' %}
709711

710712
<button {{ attributes.defaults({class: 'btn btn-'~type}) }}>
711713
{% block content %}{% endblock %}
@@ -714,6 +716,19 @@ To tell the system that ``icon`` and ``type`` are props and not attributes, use
714716
{% endif %}
715717
</button>
716718

719+
Examples of usage:
720+
721+
.. code-block:: html+twig
722+
723+
{# property "icon" is missing, an exception is thrown #}
724+
<twig:Button>Share</twig:Button>
725+
726+
{# property "icon" is passed, property "type" use its default value "primary" #}
727+
<twig:Button icon="share">Share</twig:Button>
728+
729+
{# both properties "icon" and "type" are passed #}
730+
<twig:Button icon="share" type="secondary>Share</twig:Button>
731+
717732
.. _embedded-components:
718733

719734
Passing HTML to Components Via Blocks

0 commit comments

Comments
 (0)