Fijn

Upload field component 

<div class="form-group">
    <label>Offerte uploaden</label>

    <div class="m-addItem -small 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">
                <span class="text-muted user-select">Plaats document of</span> <u class="user-select">bladeren</u>
            </div>

        </div>
    </div>

    <ul class="list-group -separated">

        <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 class="form-group">
    <label>{{label}}</label>
    {% render '@add-item--small', {disabled:disabled}, true %}
    {% render '@list-group--separated' %}
</div>
 
{
  "label": "Offerte uploaden"
}

No notes defined.