Новое в Symfony 5.3: Тема CSS-формы Tailwind

Tailwind CSS — это самый популярный фреймворк CSS, ориентированный на полезность. Его уникальная (и на первый взгляд странная) философия делает его ошеломляющим успехом и меняет способ управления CSS во многих приложениях.

Symfony включает готовые к использованию темы, чтобы ваши формы соответствовали внешнему виду других популярных фреймворков, таких как Bootstrap и Foundation. Вот почему в Symfony 5.3 мы добавили новую тему Tailwind CSS для форм Symfony.

Новая тема основана на Tailwind CSS 2.x и его официальном плагине Tailwind CSS form. Из-за природы Tailwind CSS существует неограниченное количество способов стилизации форм. Вот почему тема формы применяет абсолютный минимум стилей, чтобы их можно было использовать, а также предоставляет параметры настройки для каждой части поля формы. Начните с применения темы к какой-либо форме:

{% form_theme form 'tailwind_2_layout.html.twig' %}

{% block body %}
    User Sign Up:
    {{ form(form) }}
{% endblock %}

Затем вы можете настроить каждую часть поля формы, используя параметры *_class:

{{ form_row(form.username, {
    row_class: 'mt-2 px-3 ...',
    label_class: 'font-semibold text-gray-600 ...',
    error_item_class: 'text-red-700 ...',
    widget_class: 'border border-gray-200 bg-gray-50 ...',
    widget_disabled_class: 'border-dashed text-gray-200 ...',
    widget_errors_class: 'border-double border-red-500 bg-red-50 ...',
}) }}

Если вы хотите применить одни и те же стили к разным полям и/или формам, вам не нужно повторять одни и те же пользовательские стили снова и снова. Вместо этого создайте свою собственную тему формы на основе темы CSS Tailwind следующим образом:

{# templates/form/theme.html.twig #}
{% use 'tailwind_2_layout.html.twig' %}

{% block form_row %}
    {% set row_class = row_class|default('mt-2 px-3 ...') %}
    {{ parent() }}
{% endblock form_row %}

{% block form_label %}
    {% set label_class = label_class|default('font-semibold text-gray-600 ...') %}
    {{ parent() }}
{% endblock form_label %}

{# ... #}

Затем зарегистрируй и используйте эту тему в своем приложении так же, как любую другую настраиваемую тему формы Symfony.

Наверх