[英]add an icon to django crispy form submit button
我正在為脆脆的 Button 苦苦掙扎。 我想在里面有一個圖標,而不僅僅是默認按鈕
我目前使用的表格就像
class MyForm(forms.ModelForm):
helper = FormHelper()
helper.layout = Layout(
Div(
Div(PrependedText('source_text', '<span class="fa fa-user"></span>'), css_class='col-md-6'),
Div(PrependedText('destination_text','<span class="fa fa-flag-checkered"></span>'), css_class='col-md-6'),
css_class='row-fluid'),
Div(
Div(PrependedText('departure', '<span class="fa fa-clock-o"></span>'), css_class='col-md-3'),
Div('departure_delta', css_class='col-md-2'),
Div(Submit('submit', "Neue Fahrt starten", css_class="btn"), css_class="col-md2"),
css_class='row-fluid'),
)
helper.form_show_labels = False
helper.form_id = 'id_travelshare'
class Meta:
model = MyModel
fields = ['source', 'source_text', 'destination',
'destination_text', 'departure', 'departure_delta']
widgets = {
'source': forms.HiddenInput(),
'destination': forms.HiddenInput(),
'departure' : forms.DateTimeInput(attrs={'class':'datetimepicker'}),
}
我想要的是一個里面有一個圖標的按鈕。 我沒有找到一個例子。 也許有人有一個。
親切的問候
邁克爾
為此,很難使用內置的 Submit 布局項。 相反,最好只使用這樣的常規 layout.HTML 項:
self.helper.layout.append(
layout.HTML('<button type="submit" class="btn btn-primary">'
'<span class="fas fa-plus"></span> Apply to change order'
'</button>'))
您可以向提交按鈕添加 CSS 類,然后使用此類為按鈕指定背景圖像:
Submit('submit', "Neue Fahrt starten", css_class="btn icon-button")
# in your .css file:
.btn.icon-button {
background-image: url(../../icons/button-arrow-right.png);
}
這對我來說非常有效:
PrependedText('price', '<span class="fas fa-lira-sign"></span>')
與上述同樣值得的解決方案相比,這似乎是最簡單的方法:-)
我可以使用普通鏈接並使用JS提交表單。 現在它看起來像:
<a href="#" class="btn btn-primary">
<i class="fa fa-plus" aria-hidden="true"></i>
Hinzufuegen
</a>
問候
邁克爾
您可以使用 StrictButton 創建按鈕元素而不是輸入並將類型設置為“提交”。 然后你可以把任何你想要的 html 放在按鈕里面。
StrictButton('Neue Fahrt starten <i class="fa fa-pencil"></i>', type="submit", css_class="btn")
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.