<ul class="list-group">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Genereer
</button>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
<circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
<circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
<animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
</circle>
</svg>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</li>
</ul>
{% set rand=range(1,99999)|random %}
<ul class="list-group{% if separated %} -separated{% endif %}{% if collapse %} -collapse{% endif %}">
{% if upload and text == false %}
<li class="list-group-item -upload py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<div class="w-100 position-relative">{% render '@add-item--no-box-absolute' %}</div>
</li>
{% endif %}
{% if collapse %}
<li>
<div class="list-group-item user-select-none py-2 px-3 px-md-4 d-flex align-items-center cursor-pointer {% if collapsed %}collapsed{% endif %}" data-toggle="collapse" data-target="#collapseListGroup{{rand}}" aria-expanded="{% if collapsed == false %}true{% else %}false{% endif %}" aria-controls="collapseListGroup{{rand}}">
{% render '@circle', {size:"avatar", icon:"arrow-right-filled"}, true %}
<strong class="ml-2">{{collapse_label}}</strong>
{% if indicator or text %}
{% if indicator %}
{% set icon='documents' %}
{% set count=3 %}
{% elif text %}
{% set icon='edit-alt' %}
{% set count=1 %}
{% endif %}
<div class="list-group-indicator text-muted ml-3 d-flex align-items-center">
<i class="icon-{{icon}}"></i>
<span class="ml-1">{{count}}</span>
</div>
{% endif %}
</div>
<ul class="collapse {% if collapsed == false %}show{% endif %} list-group" id="collapseListGroup{{rand}}">
{% endif %}
{% if text %}
<li class="list-group-item p-3 p-md-4 -notes">
{% render '@comment--add-comment-paragraph', {text:'Voeg een notitie toe', placeholder: placeholder, border:false, paragraph:paragraph, button_text:"Opslaan"}, true %}
</li>
{% else %}
{% for i in range(0, amount) -%}
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex {% if (i < 2) and (amount != 1) %}text-muted pointer-events-none{% endif %}"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
{% if (i > 1) or (amount==1) %}
{% render '@circle--small', {icon:"view", link:true}, true %}
{% render '@circle--small', {icon:"download-alt"}, true %}
{% if not disabled %}
{% render '@circle--small', {icon:"bin"}, true %}
{% endif %}
{% elif i == 1 %}
<span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
{% render '@spinner' %}
{% else %}
{% render '@button', {text:"Genereer", small:true}, true %}
{% endif %}
</div>
</li>
{% endfor %}
{% endif %}
{% if collapse %}
</ul>
</li>
{% endif %}
</ul>
{
"separated": false,
"amount": 3,
"collapse": false,
"collapsed": false,
"collapse_label": "Documenten",
"indicator": false,
"text": false,
"upload": false
}
List group items can contain a filename and actions, defined by the buttons on the right. If the filename is clicked, the file should be openend or downloaded.
This is necessary when dealing with long filenames and small screen sizes. The filename will be cut off so the file extension is always visible. See example below:
<a href="bestand.pdf" class="mr-3 d-flex ">
<span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span>
<span>.pdf</span>
</a>A document that should be generated is not clickable, notice the class: .pointer-events-none but this can also be done by changing the a tag to a div tag, and after the document is generated create an a tag and add a href. Whatever is easier to implement.