Тема форми Bootstrap 5
Дата оновлення перекладу 2023-09-04
Тема форми 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 при відображенні форм. Якщо ви хочете застосувати їх до всії форм, визначіть таку кнфігурацію:
1 2 3
# config/packages/twig.yaml
twig:
form_themes: ['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
) до класу ярлика.
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
до ярлика:
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
.
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
вашого типу форми.
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.
Це не означає, що весь ваш веб-сайт автоматично дотримується повного стандарту, але це означає, що ви багато зробили, щоб створити дизайн для всіх користувачів.