You are here

bootstrap-panel.html.twig in Express 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/contrib/bootstrap/templates/bootstrap/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. 'panel',
  47. errors ? 'panel-danger' : 'panel-' ~ panel_type|clean_class,
  48. ]
  49. %}
  50. <div{{ attributes.addClass(classes) }}>
  51. {# Heading #}
  52. {% if heading %}
  53. {% block heading %}
  54. <div class="panel-heading">
  55. {%
  56. set heading_classes = [
  57. 'panel-title',
  58. required ? 'form-required' : '',
  59. ]
  60. %}
  61. {% if collapsible %}
  62. <a{{ heading_attributes.addClass(heading_classes) }} href="{{ target }}">{{ heading }}</a>
  63. {% else %}
  64. <div{{ heading_attributes.addClass(heading_classes) }}>{{ heading }}</div>
  65. {% endif %}
  66. </div>
  67. {% endblock %}
  68. {% endif %}
  69. {# Body #}
  70. {% block body %}
  71. {%
  72. set body_classes = [
  73. 'panel-body',
  74. collapsible ? 'panel-collapse',
  75. collapsible ? 'collapse',
  76. collapsible ? 'fade',
  77. errors or collapsible and not collapsed ? 'in',
  78. ]
  79. %}
  80. {%
  81. set description_classes = [
  82. 'help-block',
  83. description and description.position == 'invisible' ? 'sr-only',
  84. ]
  85. %}
  86. {% if errors %}
  87. <div class="alert alert-danger" role="alert">
  88. <strong>{{ errors }}</strong>
  89. </div>
  90. {% endif %}
  91. <div{{ body_attributes.addClass(body_classes) }}>
  92. {% if description and description.position == 'before' %}
  93. <p{{ description.attributes.addClass(description_classes) }}>{{ description.content }}</p>
  94. {% endif %}
  95. {{ body }}
  96. {% if description and description.position == 'after' or description.position == 'invisible' %}
  97. <p{{ description.attributes.addClass(description_classes) }}>{{ description.content }}</p>
  98. {% endif %}
  99. </div>
  100. {% endblock %}
  101. {# Footer #}
  102. {% if footer %}
  103. {% block footer %}
  104. {%
  105. set footer_classes = [
  106. 'panel-footer',
  107. ]
  108. %}
  109. <div{{ footer_attributes.addClass(footer_classes) }}>{{ footer }}</div>
  110. {% endblock %}
  111. {% endif %}
  112. </div>