Twig Components
Общие сведения
Компоненты Twig позволяют привязать объект к шаблону, упрощая визуализацию и повторное использование небольших "элементов" шаблона
Каждый компонент состоит из:
Класса, классы компонентов по умолчанию расположены в директории: src/Twig/Components/
Шаблона, который по умолчанию расположен в директории templates/components/
Установка
composer require symfony/ux-twig-component
Если не установлен Symfony Flex, добавьте конфигурационный файл config/packages/twig_component.yaml, чтобы управлять каталогом шаблонов для компонентов
Источник: https://symfony.com/bundles/ux-twig-component/current/index.html#anonymous-components
Основы
Повторно используемый элемент "оповещения", который можно использовать для отображения
Создадим класс, который содержит два свойства
В файле config/packages/twig_component.yaml прописан путь к классам компонентов, который будет использоваться по умолчанию
// src/Twig/Components/Alert.php
namespace App\Twig\Components;
use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
#[AsTwigComponent]
class Alert
{
public string $type = 'success';
public string $message;
}
Создадим шаблон
{# templates/components/Alert.html.twig #}
{{ message }}
Вызвать компонент на странице можно одним из двух способов
#Указывается имя компонента и присваивается значение для свойства message класса Alert
{{ component('Alert', {message: 'Hello Twig Components!'}) }}
#Все компоненты Twig в приложении Symfony, расположенные в каталоге templates/components/
php bin/console debug:twig-component
Если вы используете Symfony MakerBundle, можн создать новый компонент с помощью команды make:twig-component
Passing & Rendering Attributes
Если у свойства есть метод настройки (например, setMessage()), он будет вызван вместо прямой установки свойства.
Можно отключить предоставление общедоступных свойств для компонента. Если это свойство отключено, его необходимо использовать
#[AsTwigComponent(exposePublicProps: false)]
class Alert
{
// ...
}
Если вы передадите дополнительные реквизиты, которые не могут быть установлены в вашем классе компонентов, они могут быть отображены как атрибуты
{{ component('Alert', {
id: 'custom-alert-id',
message: 'Danger Will Robinson!'
}) }}
Чтобы отобразить атрибуты, используйте специальную переменную attributes, которая доступна в каждом шаблоне компонента:
{{ message }}
В консоли браузера это будет выглядеть следующим образом:
Danger Will Robinson!