@@ -122,6 +122,15 @@ and any other components by running:
122122
123123 Take a moment to fist pump - then come back!
124124
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+
125134 .. _naming :
126135
127136Naming Your Component
@@ -297,22 +306,22 @@ prefix the attribute with ``:`` or use the normal ``{{ }}`` syntax:
297306 // pass object, array, or anything you imagine
298307 <twig:Alert : foo="{col: ['foo', 'oof']}" />
299308
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 ``.
302311
303- To pass the boolean ``false ``, you can pass a Twig expression
312+ To pass the boolean ``false ``, you can pass a Twig expression
304313``{{ false }} `` or use the dynamic syntax (with the ``: `` prefix):
305314
306315.. code-block :: html+twig
307316
308- {# ❌ the string 'false' is converted to the boolean 'true' #}
317+ {# ❌ the string 'false' is converted to the boolean 'true' #}
309318 <twig:Alert message="..." withCloseButton="false" />
310319
311320 {# ✅ use the 'false' boolean value #}
312321 <twig:Alert message="..." withCloseButton="{{ false }}" />
313-
322+
314323 {# ✅ use the dynamic syntax #}
315- <twig:Alert message="..." :withCloseButton="false" />
324+ <twig:Alert message="..." :withCloseButton="false" />
316325
317326Don't forget that you can mix and match props with attributes that you
318327want to render on the root element:
@@ -507,14 +516,14 @@ component use a ``PreMount`` hook::
507516 an error will be prompted, indicating that one or more options do not exist.
508517 To avoid this, use the ``ignoreUndefined() `` method with ``true ``.
509518 See `ignore not defined options `_ for more info::
510-
519+
511520 $resolver->setIgnoreUndefined(true);
512-
521+
513522 The major drawback of this configuration is that the OptionsResolver will
514523 remove every non-defined option when resolving data. To maintain props that
515524 have not been defined within the OptionsResolver, combine the data from the
516525 hook with the resolved data::
517-
526+
518527 return $resolver->resolve($data) + $data;
519528
520529The data returned from ``preMount() `` will be used as the props for mounting.
@@ -691,7 +700,7 @@ You can also add more, named blocks:
691700 </div>
692701
693702Render these in the normal way.
694-
703+
695704.. code-block :: html+twig
696705
697706 <twig:Alert type="success">
@@ -1771,3 +1780,4 @@ https://symfony.com/doc/current/contributing/code/bc.html
17711780.. _`shadcn/ui` : https://ui.shadcn.com
17721781.. _`tales-from-a-dev/twig-tailwind-extra` : https://github.com/tales-from-a-dev/twig-tailwind-extra
17731782.. _`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