You are here

Home » API reference » GridStack 8

gridstack.html.twig in GridStack 8

Same filename and directory in other branches
  1. 8.2 templates/gridstack.html.twig

Default theme implementation for the GridStack template.

Available variables:

  • items: The array of items containing gridstack contents and captions.
  • settings: A cherry-picked settings that mostly defines the box HTML or layout, and none of JS settings/options which are defined at data-config.
  • attributes: The array of attributes to hold classes, id and config data containing JSON object aka JS settings the GridStack expects. We don't store these JS settings in the normal <head>, but inline within data-config attribute instead.

Debug: Use Kint: {{ kint(variable) }} Dump all available variables and their contents: {{ dump() }} Dump only the available variable keys: {{ dump(_context|keys) }}

See also

https://www.drupal.org/node/1906780

https://www.drupal.org/node/1903374

2 theme calls to gridstack.html.twig
GridStackManager::build in src/GridStackManager.php
Returns a cacheable renderable array of a single gridstack instance.
GridStackManager::buildItems in src/GridStackManager.php
Modifies GridStack boxes to support nested grids for Bootstrap/ Foundation.

File

templates/gridstack.html.twig
View source 
  1. {#

  2. /**

  3.  * @file

  4.  * Default theme implementation for the GridStack template.

  5.  *

  6.  * Available variables:

  7.  * - items: The array of items containing gridstack contents and captions.

  8.  * - settings: A cherry-picked settings that mostly defines the box HTML or

  9.  *     layout, and none of JS settings/options which are defined at data-config.

  10.  * - attributes: The array of attributes to hold classes, id and config data

  11.  *     containing JSON object aka JS settings the GridStack expects. We don't

  12.  *     store these JS settings in the normal <head>, but inline within

  13.  *     data-config attribute instead.

  14.  *

  15.  * Debug:

  16.  * @see https://www.drupal.org/node/1906780

  17.  * @see https://www.drupal.org/node/1903374

  18.  * Use Kint: {{ kint(variable) }}

  19.  * Dump all available variables and their contents: {{ dump() }}

  20.  * Dump only the available variable keys: {{ dump(_context|keys) }}

  21.  */

  22. #}

  23. {%

  24.   set classes = [

  25.     'gridstack',

  26.     settings.class_by_id ? settings.class_by_id|clean_class,

  27.     settings.noMargin ? 'gridstack--nomargin',

  28.     settings.skin ? 'gridstack--skin--' ~ settings.skin|clean_class,

  29.     settings.attributes.class ? settings.attributes.class|join(' '),

  30.     settings.use_framework ? 'row' : 'gridstack--js',

  31.   ]

  32. %}

  33. {%

  34.   set nested_classes = [

  35.     settings.use_framework ? 'row' : 'gridstack gridstack--nested gridstack--js',

  36.   ]

  37. %}

  38. {% spaceless %}

  39. <{{ wrapper }}{{ attributes.addClass(settings.root ? classes : nested_classes) }}>

  40. 

  41.   {% for item in items %}

  42.     {{ item }}

  43.   {% endfor %}

  44. 

  45. </{{ wrapper }}>

  46. {% endspaceless %}