DIA Frontend

List Group 

<ul class="list-group"><a href="#" class="list-group-item list-group-item-action active">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </a><a href="#" class="list-group-item list-group-item-action">
        Maecenas blandit mauris vitae vehicula volutpat
    </a><a href="#" class="list-group-item list-group-item-action list-group-item-danger">
        Duis feugiat risus efficitur ligula condimentum tempus
    </a><a href="#" class="list-group-item list-group-item-action">
        Curabitur eget quam in ipsum tincidunt pulvinar ut a eros
    </a>
    <li class="list-group-item disabled" aria-disabled="true">
        Nam placerat erat sit amet euismod fermentum
    </li>
</ul>
 
{% spaceless %}
    {% block main %}
        {% if items %}
            {% set classes = [] %}

            {% if flush %}
                {% set classes = classes|merge([' list-group-flush']) %}
            {% endif %}

            {% if horizontal %}
                {% set classes = classes|merge([' list-group-' ~ horizontal]) %}
            {% endif %}

            <ul class="list-group{{ classes|join }}">
                {% for item in items %}
                    {% set itemClasses = [] %}

                    {% if item.style %}
                        {% set itemClasses =
                            itemClasses|merge(
                                [' list-group-item-' ~ item.style]
                            )
                        %}
                    {% endif %}

                    {% if item.active %}
                        {% set itemClasses = itemClasses|merge([' active']) %}
                    {% endif %}

                    {% if item.disabled %}
                        {% set itemClasses = itemClasses|merge([' disabled']) %}
                        {% set attributeAriaDisabled =
                            ' aria-disabled="true"'
                        %}
                    {% endif %}

                    {% if item.link %}
                        <a href="{{ item.link }}"
                            class="list-group-item list-group-item-action{{ itemClasses|join }}"
                            {{ attributeAriaDisabled }}>
                            {{ item.content }}
                        </a>
                    {% else %}
                        <li class="list-group-item{{ itemClasses|join }}"
                            {{ attributeAriaDisabled }}>
                            {{ item.content }}
                        </li>
                    {% endif %}
                {% endfor %}
            </ul>
        {% endif %}
    {% endblock %}
{% endspaceless %}
 
{
  "flush": false,
  "horizontal": null,
  "items": [
    {
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
      "link": "#",
      "active": true,
      "disabled": false,
      "style": null
    },
    {
      "content": "Maecenas blandit mauris vitae vehicula volutpat",
      "link": "#"
    },
    {
      "content": "Duis feugiat risus efficitur ligula condimentum tempus",
      "link": "#",
      "style": "danger"
    },
    {
      "content": "Curabitur eget quam in ipsum tincidunt pulvinar ut a eros",
      "link": "#"
    },
    {
      "content": "Nam placerat erat sit amet euismod fermentum",
      "disabled": true
    }
  ]
}

No notes defined.