render_fieldset.html 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. {% load i18n %}
  2. {% load form_helpers %}
  3. <div class="field-group mb-5"{% if heading %} role="group" aria-label="{{ heading }}"{% endif %}>
  4. {% if heading %}
  5. <div class="row">
  6. <h2 class="col-9 offset-3">{{ heading }}</h2>
  7. </div>
  8. {% endif %}
  9. {% for layout, title, items in rows %}
  10. {% if layout == 'field' %}
  11. {# Single form field #}
  12. {% render_field items.0 %}
  13. {% elif layout == 'attribute' %}
  14. {# A static attribute of the form's instance #}
  15. <div class="row mb-3">
  16. <label class="col-sm-3 col-form-label text-lg-end required">{{ title }}</label>
  17. <div class="col">
  18. <div class="form-control-plaintext">
  19. {{ items.0|linkify }}
  20. </div>
  21. </div>
  22. </div>
  23. {% elif layout == 'inline' %}
  24. {# Multiple form fields on the same line #}
  25. <div class="row mb-3"{% if title %} role="group" aria-label="{{ title }}"{% endif %}>
  26. <label class="col col-3 col-form-label text-lg-end{% if items|any_required %} required{% endif %}">{{ title|default:'' }}</label>
  27. {% for field in items %}
  28. <div class="col mb-1">
  29. {% render_field_with_aria field has_helptext=True %}
  30. <div class="form-text" id="{{ field.auto_id }}_helptext">{% trans field.label %}</div>
  31. {% if field.errors %}
  32. <div class="form-text text-danger" id="{{ field.auto_id }}_errors" role="alert">
  33. {% for error in field.errors %}{{ error }}{% if not forloop.last %}<br />{% endif %}{% endfor %}
  34. </div>
  35. {% endif %}
  36. </div>
  37. {% endfor %}
  38. </div>
  39. {% elif layout == 'tabs' %}
  40. {# Tabbed groups of fields #}
  41. <div class="row">
  42. <div class="col offset-3">
  43. <ul class="nav nav-pills mb-1" role="tablist">
  44. {% for tab in items %}
  45. <li role="presentation" class="nav-item">
  46. <button role="tab" type="button" id="{{ tab.id }}_tab" data-bs-toggle="tab" aria-controls="{{ tab.id }}" aria-selected="{% if tab.active %}true{% else %}false{% endif %}" data-bs-target="#{{ tab.id }}" class="nav-link {% if tab.active %}active{% endif %}">
  47. {% trans tab.title %}
  48. </button>
  49. </li>
  50. {% endfor %}
  51. </ul>
  52. </div>
  53. </div>
  54. <div class="tab-content p-0 border-0">
  55. {% for tab in items %}
  56. <div class="tab-pane {% if tab.active %}active{% endif %}" id="{{ tab.id }}" role="tabpanel" aria-labelledby="{{ tab.id }}_tab">
  57. {% for field in tab.fields %}
  58. {% render_field field %}
  59. {% endfor %}
  60. </div>
  61. {% endfor %}
  62. </div>
  63. {% endif %}
  64. {% endfor %}
  65. </div>