You are here

off-canvas-page-wrapper.html.twig in Drupal 10

Default theme implementation for a page wrapper.

For consistent wrapping to {{ page }} render in all themes. The "data-off-canvas-main-canvas" attribute is required by the off-canvas dialog. This is used by the core/drupal.dialog.off_canvas library to select the "main canvas" page element as opposed to the "off canvas" which is the dialog itself. The "main canvas" element must be resized according to the width of the "off canvas" dialog so that no portion of the "main canvas" is obstructed by the off-canvas dialog. The off-canvas dialog can vary in width when opened and can be resized by the user. The "data-off-canvas-main-canvas" attribute cannot be removed without breaking the off-canvas dialog functionality.

Available variables:

  • children: Contains the child elements of the page.

File

core/modules/system/templates/off-canvas-page-wrapper.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation for a page wrapper.
  5. *
  6. * For consistent wrapping to {{ page }} render in all themes. The
  7. * "data-off-canvas-main-canvas" attribute is required by the off-canvas dialog.
  8. * This is used by the core/drupal.dialog.off_canvas library to select the
  9. * "main canvas" page element as opposed to the "off canvas" which is the dialog
  10. * itself. The "main canvas" element must be resized according to the width of
  11. * the "off canvas" dialog so that no portion of the "main canvas" is obstructed
  12. * by the off-canvas dialog. The off-canvas dialog can vary in width when opened
  13. * and can be resized by the user. The "data-off-canvas-main-canvas" attribute
  14. * cannot be removed without breaking the off-canvas dialog functionality.
  15. *
  16. * Available variables:
  17. * - children: Contains the child elements of the page.
  18. *
  19. * @ingroup themeable
  20. */
  21. #}
  22. {% if children %}
  23. <div class="dialog-off-canvas-main-canvas" data-off-canvas-main-canvas>
  24. {{ children }}
  25. </div>
  26. {% endif %}

Related topics