使用django-crispy-forms覆盖默认的class属性

0pizxfdo  于 2023-03-04  发布在  Go
关注(0)|答案(2)|浏览(141)

我现在正在学习如何使用django crispy表单,但是还没解决这个问题。我正在和bootstrap 5一起使用它。
我有以下表格:

class CommentForm(forms.ModelForm):
    class Meta : 
        model = Comments
        fields = ["comment_content"]
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_show_labels = False
        self.fields['comment_content'].widget.attrs['placeholder'] = 'comment here...'
        self.helper.layout = Layout(
            "comment_content",
        )
        self.helper.layout.append(Submit("post_comment", "Post comment",css_class="btn btn-outline-primary"))

问题出在最后一行:它不是用css_class的值替换默认类(btn btn-primary),而是简单地在之后添加该值,因此得到的html如下:

<input type="submit" name="post_comment" value="Post comment" class="btn btn-primary btn-outline-primary" id="submit-id-post_comment">

如何使结果类是“btn btn-outline-primary”而不是“btn btn-primary btn-outline-primary”?

qyyhg6bp

qyyhg6bp1#

在分析了bootstrap5布局的源代码(确切地说是Submit元素)之后,默认的css类似乎是btn btn-primary(来自源代码):

class Submit(BaseInput):  
    # ...
    input_type = "submit"
    field_classes = "btn btn-primary"

所以你可以修改你的代码一点点如下:

# ...
    self.helper.layout = Layout(
            "comment_content",
    )
    _submit = Submit("post_comment", "Post comment")
    _submit.field_classes = 'btn btn-outlined-primary '
    self.helper.layout.append(_submit)
qqrboqgw

qqrboqgw2#

阅读Submit类文档(https://django-crispy-forms.readthedocs.io/en/latest/api_layout.html#layout.Submit),我们可以看到:

css_类字符串,可选

要应用于的其他CSS类。默认情况下无
这意味着提供给css_class的字符串不会覆盖默认值,它只会添加到默认值中。
要找到默认值,我们需要查看Submit类(https://django-crispy-forms.readthedocs.io/en/latest/_modules/layout.html)的源代码,我们看到以下内容:

class Submit(BaseInput):
    input_type = "submit"
    field_classes = "btn btn-primary"

然后,我们可以通过替换相同的代码结构来创建自定义按钮:

class CustomSubmit(BaseInput):
    input_type = "submit"
    field_classes = "btn btn-outline-primary"

然后我就可以像这样修复这个有问题的行了:self.helper.layout.append(CustomSubmit("post_comment", "Post comment",))
生成的html现在对应于 Bootstrap 概述的类:<input type="submit" name="post_comment" value="Outlined comment button" class="btn btn-outline-primary" id="submit-id-post_comment">

相关问题