<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Selecteer een definitieve configuratie</label>
<p class="form-text">Voer eventuele wijzigingen door aan de primaire configuratie, of dupliceer de configuratie.</p>
<div class="m-configuration w-100 -radio overflow-hidden">
<div class="m-configuration__main d-flex justify-content-between align-items-center position-relative p-3 p-md-4">
<div class="m-configuration__radio mr-3 mr-lg-4">
<div class="custom-control custom-radio -fill custom-control-inline mr-0">
<input type="radio" id="customRadio76570" name="configuratieundefined" value="" class="custom-control-input">
<label class="custom-control-label cursor-pointer absolute d-flex align-items-center" for="customRadio76570"></label>
</div>
</div>
<div class="m-configuration__info d-flex align-items-center flex-grow-1">
<img class="m-configuration__img rounded-circle mr-3 mr-lg-4" src="/fractal/build/img/img11.jpg">
<div class="flex-grow-1">
<strong>De Klamp Schets 1</strong>
<div class="text-muted">Totaal opties: € 15.317,65</div>
<div class="text-muted">Laatst gewijzigd: 12-03-2021, 13:25</div>
</div>
</div>
<div class="m-configuration__actions d-flex flex-column flex-sm-row ml-2">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-edit-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="bottom" data-trigger="click" data-html="true" title="" data-popover-group="open_close_configuration_menu" data-custom-class="-menu">
<i class="icon-vertical-dots"></i>
</div>
<div class="popover-content">
<div class='m-popoverMenu'>
<div class='dropdown-item'>Naam wijzigen</div>
<div class='dropdown-item'>Notitie toevoegen</div>
<div class='dropdown-divider'></div>
<div class='dropdown-item'>Archiveren</div>
<div class='dropdown-divider'></div>
<div class='dropdown-item'>Archiveren</div>
</div>
</div>
</div>
</div>
<div class="m-configuration__bottom ">
<ul class="list-group -collapse">
<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">
<div class="m-addItem -noBox d-flex align-items-center absolute cursor-pointer user-select-none">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
<div class="ml-2">
<span class="text-muted">Plaats document of</span> <u class="user-select">bladeren</u>
</div>
</div>
</div>
</li>
<li>
<div class="list-group-item user-select-none py-2 px-3 px-md-4 d-flex align-items-center cursor-pointer collapsed" data-toggle="collapse" data-target="#collapseListGroup35111" aria-expanded="false" aria-controls="collapseListGroup35111">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
<strong class="ml-2">Documenten</strong>
<div class="list-group-indicator text-muted ml-3 d-flex align-items-center">
<i class="icon-documents"></i>
<span class="ml-1">3</span>
</div>
</div>
<ul class="collapse list-group" id="collapseListGroup35111">
<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>
</li>
</ul>
</div>
</div>
</div>
<div class="form-group d-flex flex-wrap">
{% if table == false %}<label class="flex-grow-1">{{label}}</label>{% endif %}
{% if text %}<p class="form-text">Voer eventuele wijzigingen door aan de primaire configuratie, of dupliceer de configuratie.</p>{% endif %}
{% if (planner == true) and (title1=="") and (title2=="") %}
{% set title1="Adviesgesprek 1" %}
{% set title2="Adviesgesprek 2" %}
{% endif %}
{% render '@configuration', {radio:radio, notes:notes, table:table, planner:planner, title:title1, buttons:buttons, documentation_checklist:documentation_checklist, invalid:invalid, valid:valid, disabled:disabled, checked:checked, badge:badge, tabs:tabs}, true %}
{% if table == false and planner == true %}{% render '@configuration', {radio:radio, notes:notes, planner:planner, title:title2, buttons:buttons, invalid:invalid, valid:valid, disabled:disabled, badge:badge}, true %}{% endif %}
{% if add %}{% render '@add-item--no-box' %}{% endif %}
{% if show_feedback %}<div class="{% if valid %}valid-feedback{% endif %}{% if invalid %}invalid-feedback{% endif %}{% if feedback_message %} d-inline-block{% endif %}"><strong>{{feedback_message}}</strong></div>{% endif %}
</div>
{
"label": "Selecteer een definitieve configuratie",
"invalid": false,
"valid": false,
"feedback_message": "This field is invalid",
"show_feedback": false,
"radio": true,
"table": false,
"planner": false,
"buttons": false,
"documentation_checklist": false,
"disabled": false,
"checked": false,
"text": true,
"title1": "De Klamp Schets 1",
"title2": "De Klamp Schets 1",
"add": false,
"badge": false,
"notes": false,
"tabs": false
}
The configuration group radio variant contains a real HTML input radio DOM element. This radio button can be checked by clicking the entire top half of the configuration group, the list groups underneath have their own clickable space.
See list-group notes for more information about their clickability.