You are here

details.html.twig in Drupal 9

Theme override for a details element.

Available variables

  • attributes: A list of HTML attributes for the details element.
  • errors: (optional) Any errors for this details element, may not be set.
  • title: (optional) The title of the element, may not be set.
  • summary_attributes: A list of HTML attributes for the summary element.
  • description: (optional) The description of the element, may not be set.
  • children: (optional) The children of the element, may not be set.
  • value: (optional) The value of the element, may not be set.

See also

template_preprocess_details()

olivero_preprocess_details()

File

core/themes/olivero/templates/form/details.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Theme override for a details element.
  5. *
  6. * Available variables
  7. * - attributes: A list of HTML attributes for the details element.
  8. * - errors: (optional) Any errors for this details element, may not be set.
  9. * - title: (optional) The title of the element, may not be set.
  10. * - summary_attributes: A list of HTML attributes for the summary element.
  11. * - description: (optional) The description of the element, may not be set.
  12. * - children: (optional) The children of the element, may not be set.
  13. * - value: (optional) The value of the element, may not be set.
  14. *
  15. * @see template_preprocess_details()
  16. * @see olivero_preprocess_details()
  17. */
  18. #}
  19. {#
  20. Prefix 'details' class to avoid collision with Modernizr.
  21. @todo Remove prefix after https://www.drupal.org/node/2981732 has been solved.
  22. #}
  23. {%
  24. set classes = [
  25. 'olivero-details',
  26. ]
  27. %}
  28. {%
  29. set content_wrapper_classes = [
  30. 'olivero-details__wrapper',
  31. 'details-wrapper',
  32. ]
  33. %}
  34. <details{{ attributes.addClass(classes) }}>
  35. {%- if title -%}
  36. {%
  37. set summary_classes = [
  38. 'olivero-details__summary',
  39. required ? 'js-form-required',
  40. required ? 'form-required',
  41. ]
  42. %}
  43. <summary{{ summary_attributes.addClass(summary_classes) }}>
  44. {{- title -}}
  45. {%- if required -%}
  46. <span class="required-mark"></span>
  47. {%- endif -%}
  48. </summary>
  49. {%- endif -%}
  50. <div{{ content_attributes.addClass(content_wrapper_classes) }}>
  51. {% if errors %}
  52. <div class="form-item form-item--error-message">
  53. {{ errors }}
  54. </div>
  55. {% endif %}
  56. {%- if description -%}
  57. <div class="olivero-details__description">{{ description }}</div>
  58. {%- endif -%}
  59. {%- if children -%}
  60. {{ children }}
  61. {%- endif -%}
  62. {%- if value -%}
  63. {{ value }}
  64. {%- endif -%}
  65. </div>
  66. </details>