@@ -122,6 +122,15 @@ and any other components by running:
122
122
123
123
Take a moment to fist pump - then come back!
124
124
125
+ .. tip
126
+
127
+ If you use the `Symfony MakerBundle`_, you can easily create a new component
128
+ with the ``make:twig-component`` command:
129
+
130
+ .. code-block:: terminal
131
+
132
+ $ php bin/console make:twig-component Alert
133
+
125
134
.. _naming :
126
135
127
136
Naming Your Component
@@ -297,22 +306,22 @@ prefix the attribute with ``:`` or use the normal ``{{ }}`` syntax:
297
306
// pass object, array, or anything you imagine
298
307
<twig:Alert : foo="{col: ['foo', 'oof']}" />
299
308
300
- Boolean props are converted using PHP's type juggling rules. The
301
- string ``"false" `` is converted to the boolean ``true ``.
309
+ Boolean props are converted using PHP's type juggling rules. The
310
+ string ``"false" `` is converted to the boolean ``true ``.
302
311
303
- To pass the boolean ``false ``, you can pass a Twig expression
312
+ To pass the boolean ``false ``, you can pass a Twig expression
304
313
``{{ false }} `` or use the dynamic syntax (with the ``: `` prefix):
305
314
306
315
.. code-block :: html+twig
307
316
308
- {# ❌ the string 'false' is converted to the boolean 'true' #}
317
+ {# ❌ the string 'false' is converted to the boolean 'true' #}
309
318
<twig:Alert message="..." withCloseButton="false" />
310
319
311
320
{# ✅ use the 'false' boolean value #}
312
321
<twig:Alert message="..." withCloseButton="{{ false }}" />
313
-
322
+
314
323
{# ✅ use the dynamic syntax #}
315
- <twig:Alert message="..." :withCloseButton="false" />
324
+ <twig:Alert message="..." :withCloseButton="false" />
316
325
317
326
Don't forget that you can mix and match props with attributes that you
318
327
want to render on the root element:
@@ -507,14 +516,14 @@ component use a ``PreMount`` hook::
507
516
an error will be prompted, indicating that one or more options do not exist.
508
517
To avoid this, use the ``ignoreUndefined() `` method with ``true ``.
509
518
See `ignore not defined options `_ for more info::
510
-
519
+
511
520
$resolver->setIgnoreUndefined(true);
512
-
521
+
513
522
The major drawback of this configuration is that the OptionsResolver will
514
523
remove every non-defined option when resolving data. To maintain props that
515
524
have not been defined within the OptionsResolver, combine the data from the
516
525
hook with the resolved data::
517
-
526
+
518
527
return $resolver->resolve($data) + $data;
519
528
520
529
The data returned from ``preMount() `` will be used as the props for mounting.
@@ -691,7 +700,7 @@ You can also add more, named blocks:
691
700
</div>
692
701
693
702
Render these in the normal way.
694
-
703
+
695
704
.. code-block :: html+twig
696
705
697
706
<twig:Alert type="success">
@@ -1771,3 +1780,4 @@ https://symfony.com/doc/current/contributing/code/bc.html
1771
1780
.. _`shadcn/ui` : https://ui.shadcn.com
1772
1781
.. _`tales-from-a-dev/twig-tailwind-extra` : https://github.com/tales-from-a-dev/twig-tailwind-extra
1773
1782
.. _`ignore not defined options` : https://symfony.com/doc/current/components/options_resolver.html#ignore-not-defined-options
1783
+ .. _`Symfony MakerBundle` : https://symfony.com/bundles/SymfonyMakerBundle/current/index.html
0 commit comments