<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-8">
<div class="m-advancedRadio -disabled -checked -open overflow-hidden d-flex flex-wrap w-100" aria-disabled="true">
<div class="d-flex w-100">
<div class="m-advancedRadio__left position-relative">
<div class="custom-control custom-radio custom-control-inline mr-0 -disabled -checked">
<input type="radio" id="customRadio48740" name="advanced" value="Ja" class="custom-control-input" disabled checked>
<label class="custom-control-label d-flex align-items-center" for="customRadio48740">Ja</label>
</div>
</div>
<div class="m-advancedRadio__right">
<div class="m-addItem -disabled -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 "><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>
</li>
</ul>
</div>
</div>
</div>
<div class="col-4">
<div class="m-advancedRadio -disabled overflow-hidden d-flex flex-wrap w-100" aria-disabled="true">
<div class="d-flex w-100">
<div class="m-advancedRadio__left position-relative">
<div class="custom-control custom-radio custom-control-inline mr-0 -disabled">
<input type="radio" id="customRadio8971" name="advanced" value="Nee" class="custom-control-input" disabled>
<label class="custom-control-label d-flex align-items-center" for="customRadio8971">Nee</label>
</div>
</div>
<div class="m-advancedRadio__right">
<div class="m-addItem -disabled -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 "><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>
</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": true,
"checked": true,
"open": true,
"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.