<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1 ">Flora en Fauna onderzocht </label>
<div class="m-advancedRadioWrap w-100">
<div class="form-row">
<div class="col-6">
<div class="m-advancedRadio overflow-hidden d-flex flex-wrap w-100">
<div class="d-flex w-100">
<div class="m-advancedRadio__left position-relative">
<div class="custom-control custom-radio custom-control-inline mr-0">
<input type="radio" id="customRadio76231" name="advanced" value="Ja" class="custom-control-input">
<label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio76231">Ja</label>
</div>
</div>
<div class="m-advancedRadio__right">
<div class="m-addItem -extraSmall rounded cursor-pointer d-flex justify-content-center align-items-center pt-0 pr-2 pb-2 pl-2">
<div class="d-flex flex-wrap justify-content-center align-items-center">
<div class="mt-1">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
</div>
<div class="mx-2 mt-1 text-center">
<u class="user-select">bladeren</u>
</div>
</div>
</div>
</div>
</div>
<div class="m-advancedRadio__bottom w-100">
<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>
</div>
</div>
</div>
<div class="col-6">
<div class="m-advancedRadio overflow-hidden d-flex flex-wrap w-100">
<div class="d-flex w-100">
<div class="m-advancedRadio__left position-relative">
<div class="custom-control custom-radio custom-control-inline mr-0">
<input type="radio" id="customRadio3585" name="advanced" value="Nee" class="custom-control-input">
<label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio3585">Nee</label>
</div>
</div>
<div class="m-advancedRadio__right">
<div class="m-addItem -extraSmall rounded cursor-pointer d-flex justify-content-center align-items-center pt-0 pr-2 pb-2 pl-2">
<div class="d-flex flex-wrap justify-content-center align-items-center">
<div class="mt-1">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
</div>
<div class="mx-2 mt-1 text-center">
<u class="user-select">bladeren</u>
</div>
</div>
</div>
</div>
</div>
<div class="m-advancedRadio__bottom w-100">
<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>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1 {% if info %}d-flex align-items-center{% endif %}">{{label}} {% if info %}<div class="d-inline-block ml-2">{% render '@circle--tiny' %}</div>{% endif %}</label>
<div class="m-advancedRadioWrap w-100">
<div class="form-row">
<div class="{% if open %}col-8{% else %}col-6{% endif %}">
{% set variant = 'default' %}
{% if tabs %}
{% set variant = 'tabs' %}
{% endif %}
{% render '@advanced-radio--'+variant, {label:"Ja", invalid:invalid, valid:valid, textarea:textarea, open:open, extra_options:extra_options, disabled:disabled, checked:checked, tabs:tabs}, true %}
</div>
<div class="{% if open %}col-4{% else %}col-6{% endif %}">
{% render '@advanced-radio', {label:"Nee", invalid:invalid, valid:valid, open:false, extra_options:extra_options, disabled:disabled, checked:false, tabs:tabs}, true %}
</div>
</div>
</div>
{% 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": "Flora en Fauna onderzocht",
"invalid": false,
"valid": false,
"feedback_message": "This field is invalid",
"show_feedback": false,
"textarea": false,
"disabled": false,
"checked": false,
"open": false,
"extra_options": true,
"info": false,
"tabs": false
}
When this component is disabled the addItem component in it (if it contains it) should be disabled as well. You can do this by adding the .-disabled class to the .m-addItem div.
By default the following parts inside the advanced radio button are hidden: .m-advancedRadio__right and .m-advancedRadio__bottom. These parts can contain extra components like the add-item and list-group component. To show these parts add the class .-open to the .m-advancedRadio div. When these components are not available the .m-advancedRadio__right and .m-advancedRadio__bottom div’s should not be used.
When the advancedRadio button is opened to show the extra options the columns sizes above should be adjusted. By default they are divided 50/50 (.col-6), the radio button that is opened should have a .col-8 class and the other should have a .col-4 class.