bootstrap_italia-8.x-0.x-dev/components/components-2/list/list-demo.html.twig

{#
/**
 * @file
 * List demo.
 *
 * Example:
 *
   {% include '@bi-bcl/list/list-demo.html.twig' %}
 */
#}
{% apply spaceless %}

  {% set demo_items_1 = [
    {'list_text': 'Text'},
    {'list_url': '#', 'list_text': 'Link'},
    {'list_url': '#', 'list_text': 'Link active', 'list_active': true},
  ] %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Simple List demo'|t,
    path_demo_code: '/list/list-demo.html.twig#L25',
  } %}
    {% block content %}

      {% include '@bi-bcl/list/list.html.twig' with {
        list_items: demo_items_1,
      } %}

    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'List with avatar icon'|t,
    path_demo_code: '/list/list-demo.html.twig#L38',
  } %}
    {% block content %}

      {% embed '@bi-bcl/list/list.html.twig' with {
        list_items: demo_items_1,
      } %}
        {% block listItems %}

          {% for item in _list_items %}
            {% embed '@bi-bcl/list/list-item.html.twig' with item %}
              {% block listStart %}

                {% embed '@bi-bcl/avatar/avatar.html.twig' with {
                  avatar_size: 'lg'
                } %}
                  {% block avatarContent %}
                    <img src="https://randomuser.me/api/portraits/{{ random(['women','men']) }}/{{ random(24) }}.jpg" alt="Giovanna Ferrero picture {{ loop.index }}">
                  {% endblock %}
                {% endembed %}

              {% endblock %}
            {% endembed %}
          {% endfor %}

        {% endblock %}
      {% endembed %}

    {% endblock %}
  {% endembed %}

  {% set demo_items_2 = [
    {'list_text': 'Text', 'list_icon': 'it-folder'},
    {'list_url': '#', 'list_text': 'Link', 'list_icon': 'it-folder'},
    {'list_url': '#', 'list_text': 'Link active', 'list_active': true, 'list_icon': 'it-folder'},
  ] %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'List with icon demo'|t,
    path_demo_code: '/list/list-demo.html.twig#L77',
  } %}
    {% block content %}

      {% include '@bi-bcl/list/list.html.twig' with {
        list_items: demo_items_2,
      } %}

    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'List with image demo'|t,
    path_demo_code: '/list/list-demo.html.twig#L90',
  } %}
    {% block content %}

      {% embed '@bi-bcl/list/list.html.twig' with {
        list_items: demo_items_1,
      } %}
        {% block listItems %}

          {% for item in _list_items %}
            {% embed '@bi-bcl/list/list-item.html.twig' with item %}
              {% block listImage %}
                <div class="it-thumb"><img src="https://placehold.co/40x40.png?text=40x40" alt="{{ 'Image description'|t }}"></div>
              {% endblock %}
            {% endembed %}
          {% endfor %}

        {% endblock %}
      {% endembed %}

    {% endblock %}
  {% endembed %}

  {% set demo_items_3 = [
    {'list_text': 'Text', 'list_show_end_arrow': true},
    {'list_url': '#', 'list_text': 'Link', 'list_show_end_arrow': true},
    {'list_url': '#', 'list_text': 'Link active', 'list_active': true, 'list_show_end_arrow': true},
  ] %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'List with arrow demo'|t,
    path_demo_code: '/list/list-demo.html.twig#L121',
  } %}
    {% block content %}

      {% include '@bi-bcl/list/list.html.twig' with {
        list_items: demo_items_3,
      } %}

    {% endblock %}
  {% endembed %}

  {% set demo_items_4 = [
    {'list_text': 'Text', 'list_metadata': 'Metadata Text'},
    {'list_url': '#', 'list_text': 'Link', 'list_metadata': 'Metadata Text'},
    {'list_url': '#', 'list_text': 'Link active', 'list_active': true, 'list_metadata': 'Metadata Text'},
  ] %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'List with metadata demo'|t,
    path_demo_code: '/list/list-demo.html.twig#L140',
  } %}
    {% block content %}

      {% include '@bi-bcl/list/list.html.twig' with {
        list_items: demo_items_4,
      } %}

    {% endblock %}
  {% endembed %}

  {% set demo_items_5 = [
    {'list_title': 'Title', 'list_text': 'Lorem ipsum dolor sit amet.', 'list_metadata': 'Metadata Text', 'list_icon': 'it-code-circle'},
    {'list_title': 'Title', 'list_url': '#', 'list_text': 'Lorem ipsum dolor sit amet.', 'list_metadata': 'Metadata Text', 'list_icon': 'it-file'},
    {'list_title': 'Title', 'list_url': '#', 'list_text': 'Lorem ipsum dolor sit amet.', 'list_active': true, 'list_metadata': 'Metadata Text', 'list_icon': 'it-folder'},
  ] %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'List with text, action and metadata'|t,
    path_demo_code: '/list/list-demo.html.twig#L153',
  } %}
    {% block content %}

      {% embed '@bi-bcl/list/list.html.twig' %}
        {% block listItems %}

          {% for item in demo_items_5 %}
            {% embed '@bi-bcl/list/list-item.html.twig' with {
              list_metadata: item.list_metadata,
              list_active: item.list_active,
              list_url: item.list_url,
              list_icon: item.list_icon,
            } %}
              {% block listText %}
                <div>
                  <h4 class="text m-0">{{ item.list_title }}</h4>
                  <p class="small m-0">{{ item.list_text }}</p>
                </div>
              {% endblock %}
            {% endembed %}
          {% endfor %}

        {% endblock %}
      {% endembed %}

    {% endblock %}
  {% endembed %}

{% endapply %}