Como trasnsformar o combobox da "classe de voo" para um widget com Radio Buttons?
Como trasnsformar o combobox da "classe de voo" para um widget com Radio Buttons?
Oii Josenildo, como você está?
Peço desculpas pela demora em obter um retorno.
Para transformar o combobox da classe de voo para um radiobutton, podemos utilizar no atributo widget
da classe PassagemForms
que está localizada no arquivo forms.py, a opção forms.RadioSelect()
, como mostro abaixo:
widgets = {
'data_ida': DatePicker(),
'data_volta': DatePicker(),
'classe_viagem': forms.RadioSelect()
}
E para que o frontend/estética do formulário não seja prejudicada após essa mudança, podemos adicionar uma condição no template index.html para que quando for a opção de classe do Vôo, utilizaremos classes auxiliares para que possa colocar o RadioButton
em linha e de forma organizada:
<div class="form-group">
<label for="{{field.id_for_label}}">{{field.label}}</label>
{%if field.label == "Classe do Vôo" %}
{{ field | add_class:'form-control form-check form-check-inline pl-4'}}
{% else %}
{{ field | add_class:'form-control'}}
{% endif %}
</div>
Dessa forma, teremos o seguinte resultado:
Um detalhe muito importante é que para os códigos exemplificados acima, foi utilizado como base o bootstrap 4.0.0, deixo abaixo o código a ser inserido no arquivo base.html
:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
Caso queira se aprofundar mais em relação a formulários no Django e estilização dos tipos de campos, recomendo o artigo abaixo que irá mostrar outras opções de widgets:
O artigo acima está em inglês, caso tenha dificuldade com o idioma, recomendo o uso do tradutor do navegador.
Qualquer dúvida fico à disposição.
Abraços e bons estudos.