You are here

uikit-view-grid.html.twig in UIkit Components 8

Theme override for views to display rows in a grid.

Available variables:

  • attributes: HTML attributes for the wrapping element.
  • title: The title of this group of rows.
  • view: The view object.
  • rows: The rendered view results.
  • options: The view plugin style options.
    • row_class_default: A flag indicating whether default classes should be used on rows.
    • col_class_default: A flag indicating whether default classes should be used on columns.
  • items: A list of grid items. Each item contains a list of rows or columns. The order in what comes first (row or column) depends on which alignment type is chosen (horizontal or vertical).

    • attributes: HTML attributes for each row or column.
    • content: A list of columns or rows. Each row or column contains:
      • attributes: HTML attributes for each row or column.
      • content: The row or column contents.

File

uikit_views/templates/views/uikit-view-grid.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Theme override for views to display rows in a grid.
  5. *
  6. * Available variables:
  7. * - attributes: HTML attributes for the wrapping element.
  8. * - title: The title of this group of rows.
  9. * - view: The view object.
  10. * - rows: The rendered view results.
  11. * - options: The view plugin style options.
  12. * - row_class_default: A flag indicating whether default classes should be
  13. * used on rows.
  14. * - col_class_default: A flag indicating whether default classes should be
  15. * used on columns.
  16. * - items: A list of grid items. Each item contains a list of rows or columns.
  17. * The order in what comes first (row or column) depends on which alignment
  18. * type is chosen (horizontal or vertical).
  19. * - attributes: HTML attributes for each row or column.
  20. * - content: A list of columns or rows. Each row or column contains:
  21. * - attributes: HTML attributes for each row or column.
  22. * - content: The row or column contents.
  23. *
  24. * @see template_preprocess_views_view_grid()
  25. * @see template_preprocess_uikit_view_grid()
  26. */
  27. #}
  28. {{ attach_library('uikit_components/uikit-view-grid') }}
  29. {%
  30. set classes = [
  31. 'views-view-grid',
  32. 'uikit-view-grid',
  33. grid_divider ? 'uikit-view-grid-divider',
  34. ]
  35. %}
  36. {% if title %}
  37. <h3>{{ title }}</h3>
  38. {% endif %}
  39. <div id="{{ id }}" {{ attributes.addClass(classes) }}>
  40. <ul class="{{ grid_classes }}">
  41. {% for column in items %}
  42. {% for row in column.content %}
  43. <li>{{ row.content }}</li>
  44. {% endfor %}
  45. {% endfor %}
  46. </ul>
  47. </div>