ui_suite_daisyui-4.0.x-dev/templates/ui_styles_library/ui-styles-overview-page.html.twig

{#
/**
 * @file
 * Styles page template, override this in your theme.
 */
#}

<div class="grid grid-cols-12">
{% if styles is not empty %}
  <div class="col-span-3">
  <h2 class="text-3xl font-bold mb-6 mt-10">{{ 'Available styles'|t }}</h2>
  {# List of available styles with anchor links. #}
  {% for group_name, group_styles in styles %}
    {% if styles|length > 1 %}
      <h3 class="text-2xl font-bold mb-4 mt-6">{{ group_name }}</h3>
    {% endif %}
    <ul>
      {% for style in group_styles %}
        <li class="py-1">
          {# Anchor link. #}
          <a href="#{{ style.id }}" class="link">{{ style.label }}</a>
          {# External documentation links. #}
        </li>
      {% endfor %}
    </ul>
  {% endfor %}
{% endif %}
</div>
<div class="col-span-9">

  {% for group_styles in styles %}
    {% for style in group_styles %}
      <h2 class="text-3xl font-bold mb-6 mt-10" id="{{ style.id }}">{{ style.label }}</h3>
      {% if style.description %}
        <p class="my-4">{{ style.description }}</p>
      {% endif %}
      {% if style.render_links %}
        <ul class="my-2">
          {% for renderLink in style.render_links %}
            <li>
              {{ renderLink|add_class('link') }}
            </li>
          {% endfor %}
        </ul>
      {% endif %}
      {% for id, option in style.preview_options %}
        {% set option_attributes = create_attribute()
          .addClass(id)
          .addClass(option.previewed_with) %}
        {% set previewed_as = option.previewed_as %}
        {% set label = option.label %}

        {% if previewed_as == 'aside' %}
          <p class="my-4">{{ label }} ({{ id }})</p>
          <div{{ option_attributes }}>{{ 'Example'|t }}</div>
        {% elseif previewed_as == 'hidden' %}
          <p class="my-4>{{ label }} ({{ id }})</p>
        {% else %}
          <p{{ option_attributes }}>{{ label }} ({{ id }})</p>
        {% endif %}

        {% if option.description is not empty %}
          <p class="my-4>{{ option.description }}</p>
        {% endif %}
      {% endfor %}
      <hr>
    {% endfor %}
  {% endfor %}
</div>