Skip to content

Commit 30eb59f

Browse files
ker0xfabpot
ker0x
authored and
fabpot
committed
[TwigBridge] Add form templates for Bootstrap 5
1 parent 40c8122 commit 30eb59f

10 files changed

+2966
-6
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ CHANGELOG
22
=========
33

44
5.3
5-
-----
5+
---
66

77
* Add a new `markAsPublic` method on `NotificationEmail` to change the `importance` context option to null after creation
88
* Add a new `fragment_uri()` helper to generate the URI of a fragment
9+
* Add support of Bootstrap 5 for form theming
910

1011
5.3.0
1112
-----

‎Resources/views/Form/bootstrap_3_layout.html.twig

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,11 @@
5454
{%- endif -%}
5555
{%- endblock radio_widget %}
5656

57+
{% block choice_widget_collapsed -%}
58+
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-control')|trim}) -%}
59+
{{- parent() -}}
60+
{%- endblock choice_widget_collapsed %}
61+
5762
{# Labels #}
5863

5964
{% block form_label -%}

‎Resources/views/Form/bootstrap_4_layout.html.twig

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,11 @@
202202
{%- endif -%}
203203
{%- endblock radio_widget %}
204204

205+
{% block choice_widget_collapsed -%}
206+
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-control')|trim}) -%}
207+
{{- parent() -}}
208+
{%- endblock choice_widget_collapsed %}
209+
205210
{% block choice_widget_expanded -%}
206211
<div {{ block('widget_container_attributes') }}>
207212
{%- for child in form %}

‎Resources/views/Form/bootstrap_5_horizontal_layout.html.twig

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
{% use "bootstrap_5_layout.html.twig" %}
2+
3+
{# Labels #}
4+
5+
{% block form_label -%}
6+
{%- if label is same as(false) -%}
7+
<div class="{{ block('form_label_class') }}"></div>
8+
{%- else -%}
9+
{%- set row_class = row_class|default(row_attr.class|default('')) -%}
10+
{%- if 'form-floating' not in row_class and 'input-group' not in row_class -%}
11+
{%- if expanded is not defined or not expanded -%}
12+
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-label')|trim}) -%}
13+
{%- endif -%}
14+
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ' ~ block('form_label_class'))|trim}) -%}
15+
{%- endif -%}
16+
{{- parent() -}}
17+
{%- endif -%}
18+
{%- endblock form_label %}
19+
20+
{% block form_label_class -%}
21+
col-sm-2
22+
{%- endblock form_label_class %}
23+
24+
{# Rows #}
25+
26+
{% block form_row -%}
27+
{%- if expanded is defined and expanded -%}
28+
{{ block('fieldset_form_row') }}
29+
{%- else -%}
30+
{%- set widget_attr = {} -%}
31+
{%- if help is not empty -%}
32+
{%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
33+
{%- endif -%}
34+
{%- set row_class = row_class|default(row_attr.class|default('mb-3')) -%}
35+
{%- set is_form_floating = is_form_floating|default('form-floating' in row_class) -%}
36+
{%- set is_input_group = is_input_group|default('input-group' in row_class) -%}
37+
{#- Remove behavior class from the main container -#}
38+
{%- set row_class = row_class|replace({'form-floating': '', 'input-group': ''}) -%}
39+
<div{% with {attr: row_attr|merge({class: (row_class ~ ' row' ~ ((not compound or force_error|default(false)) and not valid ? ' is-invalid'))|trim})} %}{{ block('attributes') }}{% endwith %}>
40+
{%- if is_form_floating or is_input_group -%}
41+
<div class="{{ block('form_label_class') }}"></div>
42+
<div class="{{ block('form_group_class') }}">
43+
{%- if is_form_floating -%}
44+
<div class="form-floating">
45+
{{- form_widget(form, widget_attr) -}}
46+
{{- form_label(form) -}}
47+
</div>
48+
{%- elseif is_input_group -%}
49+
<div class="input-group">
50+
{{- form_label(form) -}}
51+
{{- form_widget(form, widget_attr) -}}
52+
{#- Hack to properly display help with input group -#}
53+
{{- form_help(form) -}}
54+
</div>
55+
{%- endif -%}
56+
{%- if not is_input_group -%}
57+
{{- form_help(form) -}}
58+
{%- endif -%}
59+
{{- form_errors(form) -}}
60+
</div>
61+
{%- else -%}
62+
{{- form_label(form) -}}
63+
<div class="{{ block('form_group_class') }}">
64+
{{- form_widget(form, widget_attr) -}}
65+
{{- form_help(form) -}}
66+
{{- form_errors(form) -}}
67+
</div>
68+
{%- endif -%}
69+
{##}</div>
70+
{%- endif -%}
71+
{%- endblock form_row %}
72+
73+
{% block fieldset_form_row -%}
74+
{%- set widget_attr = {} -%}
75+
{%- if help is not empty -%}
76+
{%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
77+
{%- endif -%}
78+
<fieldset{% with {attr: row_attr|merge({class: row_attr.class|default('mb-3')|trim})} %}{{ block('attributes') }}{% endwith %}>
79+
<div class="row{% if (not compound or force_error|default(false)) and not valid %} is-invalid{% endif %}">
80+
{{- form_label(form) -}}
81+
<div class="{{ block('form_group_class') }}">
82+
{{- form_widget(form, widget_attr) -}}
83+
{{- form_help(form) -}}
84+
{{- form_errors(form) -}}
85+
</div>
86+
</div>
87+
</fieldset>
88+
{%- endblock fieldset_form_row %}
89+
90+
{% block submit_row -%}
91+
<div{% with {attr: row_attr|merge({class: (row_attr.class|default('mb-3') ~ ' row')|trim})} %}{{ block('attributes') }}{% endwith %}>{#--#}
92+
<div class="{{ block('form_label_class') }}"></div>{#--#}
93+
<div class="{{ block('form_group_class') }}">
94+
{{- form_widget(form) -}}
95+
</div>{#--#}
96+
</div>
97+
{%- endblock submit_row %}
98+
99+
{% block reset_row -%}
100+
<div{% with {attr: row_attr|merge({class: (row_attr.class|default('mb-3') ~ ' row')|trim})} %}{{ block('attributes') }}{% endwith %}>{#--#}
101+
<div class="{{ block('form_label_class') }}"></div>{#--#}
102+
<div class="{{ block('form_group_class') }}">
103+
{{- form_widget(form) -}}
104+
</div>{#--#}
105+
</div>
106+
{%- endblock reset_row %}
107+
108+
{% block button_row -%}
109+
<div{% with {attr: row_attr|merge({class: (row_attr.class|default('mb-3') ~ ' row')|trim})} %}{{ block('attributes') }}{% endwith %}>{#--#}
110+
<div class="{{ block('form_label_class') }}"></div>{#--#}
111+
<div class="{{ block('form_group_class') }}">
112+
{{- form_widget(form) -}}
113+
</div>{#--#}
114+
</div>
115+
{%- endblock button_row %}
116+
117+
{% block checkbox_row -%}
118+
<div{% with {attr: row_attr|merge({class: (row_attr.class|default('mb-3') ~ ' row')|trim})} %}{{ block('attributes') }}{% endwith %}>{#--#}
119+
<div class="{{ block('form_label_class') }}"></div>{#--#}
120+
<div class="{{ block('form_group_class') }}">
121+
{{- form_widget(form) -}}
122+
{{- form_help(form) -}}
123+
{{- form_errors(form) -}}
124+
</div>{#--#}
125+
</div>
126+
{%- endblock checkbox_row %}
127+
128+
{% block form_group_class -%}
129+
col-sm-10
130+
{%- endblock form_group_class %}

0 commit comments

Comments
 (0)