input-group.html 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <div class="input-group{% if include.flat %} input-group-flat{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
  2. {% if include.prepend %}
  3. <span class="input-group-text">
  4. {% if include.prepend == "checkbox" or include.prepend == "radio" %}
  5. <input class="form-check-input m-0" type="{{ include.prepend }}" checked>
  6. {% else %}
  7. {{ include.prepend }}
  8. {% endif %}
  9. </span>
  10. {% endif %}
  11. <input type="{{ include.type | default: 'text' }}" class="form-control{% if include.input-class %} {{ include.input-class }}{% endif %}" {% if include.placeholder %} placeholder="{{ include.placeholder }}" {% endif %}{% if include.value %} value="{{ include.value }}"{% endif %} autocomplete="off">
  12. {% if include.append %}
  13. <span class="input-group-text">
  14. {% if include.append == "checkbox" or include.append == "radio" %}
  15. <input class="form-check-input m-0" type="{{ include.append }}" checked>
  16. {% else %}
  17. {{ include.append }}
  18. {% endif %}
  19. </span>
  20. {% endif %}
  21. {% if include.append-link %}
  22. <span class="input-group-text">
  23. <a href="#" class="input-group-link">{{ include.append-link }}</a>
  24. </span>
  25. {% endif %}
  26. {% if include.append-html %}
  27. <span class="input-group-text">
  28. {{ include.append-html }}
  29. </span>
  30. {% endif %}
  31. {% if include.append-button %}
  32. {% assign buttons = include.append-button | split: ',' %}
  33. <span class="input-group-text">
  34. {% for button in buttons %}
  35. {% assign b = button | split: ':' %}
  36. {% assign icon = b[0] %}
  37. {% assign description = b[1] %}
  38. <a href="#" class="link-secondary{% unless forloop.first %} ms-2{% endunless %}{% if forloop.index == 3 %} disabled{% endif %}" title="{{ description }}" data-bs-toggle="tooltip">{% include ui/icon.html icon=icon %}</a>
  39. {% endfor %}
  40. </span>
  41. {% endif %}
  42. </div>