Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TwigComponent] Add tip about make:twig-component command #2384

Merged
merged 2 commits into from
Dec 7, 2024
Merged

[TwigComponent] Add tip about make:twig-component command #2384

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
16a5bfe
Add maker bundle information
DennisdeBest Nov 16, 2024
18edb28
[Doc][TwigComponent] Simplify examples, use a tip
Kocal Dec 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 20 additions & 10 deletions src/TwigComponent/doc/index.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,15 @@ and any other components by running:

Take a moment to fist pump - then come back!

.. tip

If you use the `Symfony MakerBundle`_, you can easily create a new component
with the ``make:twig-component`` command:

.. code-block:: terminal

$ php bin/console make:twig-component Alert

.. _naming:

Naming Your Component
Expand Down Expand Up @@ -297,22 +306,22 @@ prefix the attribute with ``:`` or use the normal ``{{ }}`` syntax:
// pass object, array, or anything you imagine
<twig:Alert :foo="{col: ['foo', 'oof']}" />

Boolean props are converted using PHP's type juggling rules. The
string ``"false"`` is converted to the boolean ``true``.
Boolean props are converted using PHP's type juggling rules. The
string ``"false"`` is converted to the boolean ``true``.

To pass the boolean ``false``, you can pass a Twig expression
To pass the boolean ``false``, you can pass a Twig expression
``{{ false }}`` or use the dynamic syntax (with the ``:`` prefix):

.. code-block:: html+twig

{# ❌ the string 'false' is converted to the boolean 'true' #}
{# ❌ the string 'false' is converted to the boolean 'true' #}
<twig:Alert message="..." withCloseButton="false" />

{# ✅ use the 'false' boolean value #}
<twig:Alert message="..." withCloseButton="{{ false }}" />

{# ✅ use the dynamic syntax #}
<twig:Alert message="..." :withCloseButton="false" />
<twig:Alert message="..." :withCloseButton="false" />

Don't forget that you can mix and match props with attributes that you
want to render on the root element:
Expand Down Expand Up @@ -507,14 +516,14 @@ component use a ``PreMount`` hook::
an error will be prompted, indicating that one or more options do not exist.
To avoid this, use the ``ignoreUndefined()`` method with ``true``.
See `ignore not defined options`_ for more info::

$resolver->setIgnoreUndefined(true);

The major drawback of this configuration is that the OptionsResolver will
remove every non-defined option when resolving data. To maintain props that
have not been defined within the OptionsResolver, combine the data from the
hook with the resolved data::

return $resolver->resolve($data) + $data;

The data returned from ``preMount()`` will be used as the props for mounting.
Expand Down Expand Up @@ -691,7 +700,7 @@ You can also add more, named blocks:
</div>

Render these in the normal way.

.. code-block:: html+twig

<twig:Alert type="success">
Expand Down Expand Up @@ -1771,3 +1780,4 @@ https://symfony.com/doc/current/contributing/code/bc.html
.. _`shadcn/ui`: https://ui.shadcn.com
.. _`tales-from-a-dev/twig-tailwind-extra`: https://github.com/tales-from-a-dev/twig-tailwind-extra
.. _`ignore not defined options`: https://symfony.com/doc/current/components/options_resolver.html#ignore-not-defined-options
.. _`Symfony MakerBundle`: https://symfony.com/bundles/SymfonyMakerBundle/current/index.html
Loading