You are here

bootstrap-panel.html.twig in Open Social 8.8

Default theme implementation to display a Bootstrap Panel component.

Available variables:

  • attributes: An array of HTML attributes intended to be added to the main container tag of this template.

    • id: A valid HTML ID and guaranteed to be unique.
  • body: The primary content of the panel.
  • body_attributes: (optional) Same as attributes, except applied to the body container that appears in the template.
  • collapsible: Flag indicating whether the panel is collapsible.
  • collapsed: Flag indicating whether the panel is collapsed.
  • description: (optional) A list of description properties containing:
    • content: (optional) A description of the form element, may not be set.
    • attributes: (optional) A list of HTML attributes to apply to the description content wrapper. Will only be set when description is set.
    • position: (optional) A display setting that can have these values:
      • before: The description is output before the element. This is the default value.
      • after: The description is output after the element.
      • invisible: The description is output after the element, hidden visually but available to screen readers.
  • errors: (optional) Any errors for panel, may not be set.
  • footer: (optional) Additional contents intended to be placed at the bottom.
  • footer_attributes: (optional) Same as attributes, except applied to the footer container that appears in the template.
  • heading: (optional) The title of the panel, may not be set.
  • heading_attributes: (optional) Same as attributes, except applied to the heading container that appears in the template.
  • panel_type: (optional) A contextual state. Will be one of these values:
    • danger
    • default (default value)
    • info
    • primary
    • success
    • warning
  • target: (optional) The target of the collapsible container.

File

themes/socialbase/templates/card/bootstrap-panel.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation to display a Bootstrap Panel component.
  5. *
  6. * Available variables:
  7. * - attributes: An array of HTML attributes intended to be added to the main
  8. * container tag of this template.
  9. * - id: A valid HTML ID and guaranteed to be unique.
  10. * - body: The primary content of the panel.
  11. * - body_attributes: (optional) Same as attributes, except applied to the body
  12. * container that appears in the template.
  13. * - collapsible: Flag indicating whether the panel is collapsible.
  14. * - collapsed: Flag indicating whether the panel is collapsed.
  15. * - description: (optional) A list of description properties containing:
  16. * - content: (optional) A description of the form element, may not be set.
  17. * - attributes: (optional) A list of HTML attributes to apply to the
  18. * description content wrapper. Will only be set when description is set.
  19. * - position: (optional) A display setting that can have these values:
  20. * - before: The description is output before the element. This is the
  21. * default value.
  22. * - after: The description is output after the element.
  23. * - invisible: The description is output after the element, hidden
  24. * visually but available to screen readers.
  25. * - errors: (optional) Any errors for panel, may not be set.
  26. * - footer: (optional) Additional contents intended to be placed at the bottom.
  27. * - footer_attributes: (optional) Same as attributes, except applied to the
  28. * footer container that appears in the template.
  29. * - heading: (optional) The title of the panel, may not be set.
  30. * - heading_attributes: (optional) Same as attributes, except applied to the
  31. * heading container that appears in the template.
  32. * - panel_type: (optional) A contextual state. Will be one of these values:
  33. * - danger
  34. * - default (default value)
  35. * - info
  36. * - primary
  37. * - success
  38. * - warning
  39. * - target: (optional) The target of the collapsible container.
  40. *
  41. * @ingroup templates
  42. */
  43. #}
  44. {%
  45. set classes = [
  46. 'card',
  47. collapsible ? 'panel',
  48. collapsible and errors ? 'panel-danger' : 'panel-' ~ panel_type|clean_class,
  49. ]
  50. %}
  51. {% if body|render %}
  52. <fieldset {{ attributes.addClass(classes) }}>
  53. {# Heading #}
  54. {% if heading %}
  55. {% block heading %}
  56. <h4 class="card__title card__title--underline">
  57. {% if collapsible %}
  58. <a{{ heading_attributes }} href="{{ target }}">{{ heading }}</a>
  59. {% else %}
  60. <div{{ heading_attributes }}>{{ heading }}</div>
  61. {% endif %}
  62. </h4>
  63. {% endblock %}
  64. {% endif %}
  65. {# Body #}
  66. {% block body %}
  67. {%
  68. set body_classes = [
  69. 'card__block',
  70. collapsible ? 'panel-collapse',
  71. collapsible ? 'collapse',
  72. collapsible ? 'fade',
  73. errors or collapsible and not collapsed ? 'in',
  74. ]
  75. %}
  76. {%
  77. set description_classes = [
  78. 'help-block',
  79. description and description.position == 'invisible' ? 'sr-only',
  80. ]
  81. %}
  82. {% if errors %}
  83. <div class="alert alert-danger" role="alert">
  84. <strong>{{ errors }}</strong>
  85. </div>
  86. {% endif %}
  87. <div{{ body_attributes.addClass(body_classes) }}>
  88. {% if description and description.position == 'before' %}
  89. <p{{ description.attributes.addClass(description_classes) }}>{{ description.content }}</p>
  90. {% endif %}
  91. {{ body }}
  92. {% if description and description.position == 'after' or description.position == 'invisible' %}
  93. <p{{ description.attributes.addClass(description_classes) }}>{{ description.content }}</p>
  94. {% endif %}
  95. </div>
  96. {% endblock %}
  97. {# Footer #}
  98. {% if footer %}
  99. {% block footer %}
  100. {%
  101. set footer_classes = [
  102. 'card__actionbar',
  103. ]
  104. %}
  105. <div{{ footer_attributes.addClass(footer_classes) }}>{{ footer }}</div>
  106. {% endblock %}
  107. {% endif %}
  108. </fieldset>
  109. {% endif %}