Тема форми Bootstrap 5

Дата оновлення перекладу 2022-12-14

Тема форми Bootstrap 5

Symfony надає декілька способів інтеграції Bootstrap у ваш додаток. Найпростіший спосіб - додати обовʼязкові елементи <link> і <script> у ваші шаблони (зазвичай ви додаєте їх лише у головний шаблон розмітки, з якого розширюються інші шаблони):

        1
2
3
4
5
6
7
8
9
        {# templates/base.html.twig #}

{# майте на увазі, що блоки у вашому шаблоні можуть називатися по-іншому #}
{% block stylesheets %}
    <!-- Скопіюйте CSS з https://getbootstrap.com/docs/5.0/getting-started/introduction/#css -->
{% endblock %}
{% block javascripts %}
    <!-- Скопіюйте JavaScript з https://getbootstrap.com/docs/5.0/getting-started/introduction/#js -->
{% endblock %}
    

Якщо ваш додаток використовує сучасні практики фронтенду, краще використовувати Webpack Encore та дотримуватися цього туторіала, щоб імпортувати джерела Bootstrap у ваші файли SCSS та JavaScript.

Наступний крок - сконфігурувати додаток Symfony так, щоб він використовував стилі Bootstrap 5 при відображенні форм. Якщо ви хочете застосувати їх до всії форм, визначіть таку кнфігурацію:

YAML
XML
PHP

        1
2
3
        # config/packages/twig.yaml
twig:
    form_themes: ['bootstrap_5_layout.html.twig']
    

        1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
        <!-- config/packages/twig.xml -->
<?xml version="1.0" encoding="UTF-8" ?>
<container xmlns="http://symfony.com/schema/dic/services"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:twig="http://symfony.com/schema/dic/twig"
    xsi:schemaLocation="http://symfony.com/schema/dic/services
        https://symfony.com/schema/dic/services/services-1.0.xsd
        http://symfony.com/schema/dic/twig
        https://symfony.com/schema/dic/twig/twig-1.0.xsd">

    <twig:config>
        <twig:form-theme>bootstrap_5_layout.html.twig</twig:form-theme>
        <!-- ... -->
    </twig:config>
</container>
    

        1
2
3
4
5
6
7
8
        // config/packages/twig.php
use Symfony\Config\TwigConfig;

return static function(TwigConfig $twig) {
    $twig->formThemes(['bootstrap_5_layout.html.twig']);

    // ...
};
    

Якщо ви хочете застосовувати стилі Bootstrap від форми до форми, додайте тег form_theme у шаблони, де використовуються ці форми:

        1
2
3
4
5
6
7
8
        {# ... #}
{# цей тег застосовується лише до форм, визначених у цьому шаблоні #}
{% form_theme form 'bootstrap_5_layout.html.twig' %}

{% block body %}
    <h1>User Sign Up:</h1>
    {{ form(form) }}
{% endblock %}
    

Note

За замовчуванням, всі введення відображаються з класом mb-3 у своєму контейнері. Якщо ви перевизначите опцію класу row_attr, mb-3 також буде перевизначено, і вам знадобиться чітко додати його.

Повідомленння про помилки

На відміну від теми Bootstrap 4, помилки відображаються після елемента input. Однак, це все одно формує міцний звʼязок між помилкою та її <input>, як вимагається за стандартом WCAG 2.0.

Чекбокси та селективні кнопки

Для поля чекбоксу/селективної кнопки, виклик form_label() не відобразить нічого. У звʼязку з внутрішньою роботою Bootstrap, ярлик вже відображений form_widget().

Вбудовувані чекбокси та селективні кнопки

Якщо ви хочете відобразити свої поля чекбоксів або селективних кнопок вбудованими, ви можете додати клас checkbox-inline або radio-inline (в залежності від вашого типу Форми Symfony або конфігурації ChoiceType) до класу ярлика.

PHP
Twig

        1
2
3
4
5
6
7
8
9
10
11
        $builder
    ->add('myCheckbox', CheckboxType::class, [
        'label_attr' => [
            'class' => 'checkbox-inline',
        ],
    ])
    ->add('myRadio', RadioType::class, [
        'label_attr' => [
            'class' => 'radio-inline',
        ],
    ]);
    

Перемикачі

Bootstrap 5 дозволяє відображати чекбокси у вигляді перемикачів. Ви можете включити цю функцію у вашій формі Symfony CheckboxType, додавши клас checkbox-switch до ярлика:

PHP
Twig

        1
2
3
4
5
        $builder->add('myCheckbox', CheckboxType::class, [
    'label_attr' => [
        'class' => 'checkbox-switch',
    ],
]);
    

Tip

Ви також можете відобразити ваші перемикачі вбудованими, просто додавши клас checkbox-inline в опції label_attr:

        1
2
3
4
5
        // ...
'label_attr' => [
    'class' => 'checkbox-inline checkbox-switch',
],
// ...
    

Caution

Перемикачі працюють лише з чекбоксами.

Група введення

Щоб створити групу введення у вашій формі Symfony, просто додайте клас input-group до опції row_attr.

PHP
Twig

        1
2
3
4
5
6
        $builder->add('email', EmailType::class, [
    'label' => '@',
    'row_attr' => [
        'class' => 'input-group',
    ],
]);
    

Caution

Якщо ви заповните опцію help у вашій формі, вона також відобразиться як частина групи.

Плаваючі ярлики

Щоб відобразити поле введення з плаваючим ярликом, ви повинні додати label, placeholder і клас form-floating до опції row_attr вашого типу форми.

PHP
Twig

        1
2
3
4
5
6
7
8
9
        $builder->add('name', TextType::class, [
    'label' => 'Name',
    'attr' => [
        'placeholder' => 'Name',
    ],
    'row_attr' => [
        'class' => 'form-floating',
    ],
]);
    

Caution

Ви повинні надати label і placeholder, щоб плаваючі ярлики працювали коректно.

Доступність

Фреймворк Bootstrap 5 постарався, щоб бути доступним для функціональних варіацій на кшталт порушень зору та когнітивних здібностей. Symfony пішла далі, щоб гарантувати, що тема форми відовідає стандарту WCAG 2.0.

Це не означає, що весь ваш веб-сайт автоматично дотримується повного стандарту, але це означає, що ви багато зробили, щоб створити дизайн для всіх користувачів.