Fijn

Advanced radio component: Open 

<div class="m-advancedRadio -open 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="customRadio44044" name="advanced" value="Ja" class="custom-control-input">
                <label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio44044">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 class="m-advancedRadio{% if invalid %} is-invalid{% endif %}{% if valid %} is-valid{% endif %}{% if disabled %} -disabled{% endif %}{% if checked %} -checked{% endif %} {% if open %}-open{% endif %} overflow-hidden d-flex flex-wrap w-100" {% if disabled %}aria-disabled="true"{% endif %}>
    <div class="d-flex w-100">
        <div class="m-advancedRadio__left {% if textarea %}flex-grow-1{% endif %} position-relative">
            {% render '@radio-button', {name:"advanced", label:label, disabled:disabled, checked:checked}, true %}
        </div>
        {% if (textarea == false) and (extra_options == true) %}
        <div class="m-advancedRadio__right">
            {% render '@add-item--extra-small', {disabled:disabled}, true %}
        </div>
        {% endif %}
    </div>
    {% if extra_options == true %}
    <div class="m-advancedRadio__bottom w-100">
        {% if textarea %}
            {% render '@textarea', {rows:rows}, true %}
        {% else %}
            {% if disabled %}
                {% set amount=1 %}
                {% render '@list-group', {amount:amount, disabled:true}, true %}
            {% else %}
                {% set amount=3 %}
                {% render '@list-group', {amount:amount}, true %}
            {% endif %}
        {% endif %}
    </div>
    {% endif %}
</div>
 
{
  "name": "keuze",
  "border": false,
  "valid": false,
  "invalid": false,
  "radio": false,
  "textarea": false,
  "disabled": false,
  "checked": false,
  "open": true,
  "extra_options": true,
  "collapse": false
}

No notes defined.