带有标签的松脆形式顺风

Question

我想使用 cripsyformws 和 tailwind 创建一个包含 3 个选项卡的表单。现在它不起作用：我的 html:

{% extends "base.html" %}
{% load tailwind_filters %}

{% block content %}

<div class="max-w-lg mx-auto">
    <div class="py-5 border-t border-gray-200">
        <h1 class="text-4xl text-gray-800">Create a new company</h1>
    </div>
    <form method="post" class="mt-5">
        {% csrf_token %}
        {{ form|crispy }}
        <button type='submit' class="w-full text-white bg-blue-500 hover:bg-blue-600 px-3 py-2 rounded-md">
            Submit
        </button>
    </form>
</div>

{% endblock content %}

我的表格：

class CompanyModelForm(forms.ModelForm):
    class Meta:
        model = Company
        fields = '__all__'


    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            TabHolder(
                Tab('company_name' ,
            'fiscal_end_of_year' ,
                    ),
                Tab('Addrfirm_address',
                    'Addrfirm_code',
                    'Addrfirm_country',
                    'Addrfirm_city',
                    'Addrfirm_state'
                    ),
                Tab('AddrShipping_address',
                    'AddrShipping_code',
                    'AddrShipping_country',
                    'AddrShipping_city',
                    'AddrShipping_state'
                    ),
                Tab('AddrInvoice_address',
                    'AddrInvoice_code',
                    'AddrInvoice_country',
                    'AddrInvoice_city',
                    'AddrInvoice_state'
                    )
            )
        )
        self.helper.layout.append(Submit('submit', 'Submit'))

我的目标是为相同的表格 tab1 一般信息、tab2 送货地址、tab3 发票地址设置 3 个选项卡。 tailwind 是否允许 crispy 这样做，否则我应该怎么做

Answer 1

在页面顶部添加 {% load crispy_fotms_tags %} 并添加 crispy_foms 到您的设置。派

Answer 2

在您的 html 中使用它，即加载 crispy_forms_tags，然后使用 {% crispy form %} 呈现选项卡式表单。然后，您将根据 Django 在 HTML.

上呈现该表单的方式添加 CSS 规则

{% extends "base.html" %}
{% load tailwind_filters %}
{% load crispy_forms_tags %}

{% block content %}
<div class="max-w-lg mx-auto">
    <div class="py-5 border-t border-gray-200">
        <h1 class="text-4xl text-gray-800">Create a new company</h1>
    </div>
    <form method="post" class="mt-5">
        {% csrf_token %}
        {% crispy form %}
    </form>
</div>

{% endblock content %}

带有标签的松脆形式顺风

crispy forms tailwind with tabs

django

tailwind-css

django-crispy-forms