Tailwind CSS 表單主題

編輯此頁面

Symfony 為 Tailwind CSS 提供了極簡的表單主題。Tailwind 是一個「utility first」的 CSS 框架，並提供無限種方式來自訂您的表單。Tailwind 有一個官方的表單外掛程式，提供基本的表單重置，以標準化表單在所有瀏覽器上的外觀。此表單主題需要此外掛程式，並新增一些基本的 Tailwind 類別，讓您的表單開箱即用就看起來不錯。幾乎總是需要客製化，因此這個主題讓客製化變得容易。

An HTML form showing a range of form types styled using TailwindCSS.

若要使用，請先確定您已安裝並整合 Tailwind CSS 和表單外掛程式。請按照它們各自的文件安裝這兩個套件。

如果您偏好在每個表單的基礎上使用 Tailwind 主題，請在使用這些表單的模板中包含 form_theme 標籤

        1
2
3
4
5
6
7
8
        {# ... #}
{# this tag only applies to the forms defined in this template #}
{% form_theme form 'tailwind_2_layout.html.twig' %}

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

客製化

客製化 CSS 類別對於此主題尤其重要。

Twig 表單函式

您可以透過設定一些類別選項來自訂個別欄位的類別。

        1
2
3
4
5
6
7
8
        {{ form_row(form.title, {
    row_class: 'my row classes',
    label_class: 'my label classes',
    error_item_class: 'my error item classes',
    widget_class: 'my widget classes',
    widget_disabled_class: 'my disabled widget classes',
    widget_errors_class: 'my widget with error classes',
}) }}
    

當以這種方式客製化類別時，主題提供的預設值會被覆寫，而不是像其他主題一樣合併。這讓您可以完全控制類別，而無需擔心還原主題提供的通用預設值。

專案特定表單佈局

如果您為所有表單都有通用的 Tailwind 樣式，則可以使用 Tailwind CSS 主題作為基礎來建立自訂表單主題。

        1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
        {% use 'tailwind_2_layout.html.twig' %}

{%- block form_row -%}
    {%- set row_class = row_class|default('my row classes') -%}
    {{- parent() -}}
{%- endblock form_row -%}

{%- block widget_attributes -%}
    {%- set widget_class = widget_class|default('my widget classes') -%}
    {%- set widget_disabled_class = widget_disabled_class|default('my disabled widget classes') -%}
    {%- set widget_errors_class = widget_errors_class|default('my widget with error classes') -%}
    {{- parent() -}}
{%- endblock widget_attributes -%}

{%- block form_label -%}
    {%- set label_class = label_class|default('my label classes') -%}
    {{- parent() -}}
{%- endblock form_label -%}

{%- block form_help -%}
    {%- set help_class = help_class|default('my label classes') -%}
    {{- parent() -}}
{%- endblock form_help -%}

{%- block form_errors -%}
    {%- set error_item_class = error_item_class|default('my error item classes') -%}
    {{- parent() -}}
{%- endblock form_errors -%}
    

本作品，包括程式碼範例，以創用 CC BY-SA 3.0 授權條款授權。

版本