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

[make:twig-component] docs: Adding twig component examples and references to sister documentation #1572

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[make:twig-component] docs: Adding twig component examples and references to sister documentation #1572

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
53 changes: 52 additions & 1 deletion src/Resources/doc/index.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,55 @@ optional arguments and options. Check them out with the ``--help`` option:

$ php bin/console make:controller --help

Creating a Twig Component
~~~~~~~

Run this command to install the `Symfony UX package`_:

.. code-block:: terminal

$ composer require symfony/ux-twig-component

Make a basic `twig component`_:

.. code-block:: terminal
$ php bin/console make:twig-component
The name of your twig component (ie Notification):
> Notification

Make this a live component? (yes/no) [no]:
> no

created: src/Twig/Components/Notification.php
created: templates/components/Notification.html.twig


Success!

This will create::

// src/Twig/Components/Notification.php

<?php

namespace App\Twig\Components;

use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;

#[AsTwigComponent]
final class Notification
{
}

.. code-block:: twig

{# templates/components/Notification.html.twig #}

<div{{ attributes }}>
<!-- component html -->
</div>

Similarly, to make a `live component`_, enter ``yes`` when prompted whether to make this a live component.

Linting Generated Code
______________________
Expand Down Expand Up @@ -103,6 +152,8 @@ For that reason, in general, the generated code cannot be modified. In many case
adding your *own* maker command is so easy, that we recommend that. However, if there
is some extension point that you'd like, please open an issue so we can discuss!

.. _`SensioGeneratorBundle`: https://github.com/sensiolabs/SensioGeneratorBundle
.. _`AbstractMaker`: https://github.com/symfony/maker-bundle/blob/main/src/Maker/AbstractMaker.php
.. _`core maker commands`: https://github.com/symfony/maker-bundle/tree/main/src/Maker
.. _`live component`: https://symfony.com/bundles/ux-live-component/current/index.html
.. _`Symfony UX package`: https://ux.symfony.com/packages
.. _`twig component`: https://symfony.com/bundles/ux-twig-component/current/index.html
Loading