dropdown-menu.html 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <div class="dropdown-menu{% if include.right %} dropdown-menu-end{% endif %}{% if include.show %} dropdown-menu-demo{% endif %}{% if include.arrow %} dropdown-menu-arrow{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.dark %} data-bs-theme="dark"{% endif %}>
  2. {% if include.menu %}
  3. {% assign menu = include.menu | split: ',' %}
  4. {% for item in menu %}
  5. {% if item == '|' %}
  6. <div class="dropdown-divider"></div>
  7. {% elsif item contains 'h:' %}
  8. <h3 class="dropdown-header">{{ item | replace: 'h:', '' }}</h3>
  9. {% elsif item contains 'a:' %}
  10. <a href="#" class="dropdown-item active">{{ item | replace: 'a:', '' }}</a>
  11. {% elsif item contains 'd:' %}
  12. <a href="#" class="dropdown-item text-danger">{{ item | replace: 'd:', '' }}</a>
  13. {% else %}
  14. <a href="#" class="dropdown-item">{{ item }}</a>
  15. {% endif %}
  16. {% endfor %}
  17. {% elsif include.check or include.radio %}
  18. {% for i in (1..3) %}
  19. <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="{% if include.radio %}radio{% else %}checkbox{% endif %}"> Option {{ i }}</label>
  20. {% endfor %}
  21. {% elsif include.people %}
  22. {% for person in site.data.people limit: 5 %}
  23. <a href="#" class="dropdown-item">{% include ui/avatar.html person-id=person.id class="rounded me-2" size="xs" %} {{ person.full_name }}</a>
  24. {% endfor %}
  25. {% elsif include.type == 'text' %}
  26. {% else %}
  27. {% if include.header %}<span class="dropdown-header">Dropdown header</span>{% endif %}
  28. <a class="dropdown-item" href="#">
  29. {% if include.icons %}{% include ui/icon.html icon="settings" class="dropdown-item-icon" %} {% endif %}
  30. Action
  31. {% if include.badge %}<span class="badge bg-primary text-primary-fg ms-auto">12</span>{% endif %}
  32. </a>
  33. <a class="dropdown-item" href="#">
  34. {% if include.icons %}{% include ui/icon.html icon="edit" class="dropdown-item-icon" %} {% endif %}Another action
  35. {% if include.badge %}<span class="badge bg-green ms-auto"></span>{% endif %}
  36. </a>
  37. {% if include.active %}<a class="dropdown-item active" href="#">{% if include.icons %}{% include ui/icon.html icon="activity" class="dropdown-item-icon" %} {% endif %}Active action</a>{% endif %}
  38. {% if include.disabled %}<a class="dropdown-item disabled" href="#">{% if include.icons %}{% include ui/icon.html icon="user-x" class="dropdown-item-icon" %} {% endif %}Disabled action</a>{% endif %}
  39. {% if include.separated %}
  40. <div class="dropdown-divider"></div>
  41. <a class="dropdown-item" href="#">{% if include.icons %}{% include ui/icon.html icon="plus" class="dropdown-icon" class="dropdown-item-icon" %} {% endif %}Separated link</a>
  42. {% endif %}
  43. {% endif %}
  44. </div>