Fijn

Add item component: Extra Small 

<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>
 
{% if show_label %}
<div class="form-group d-flex flex-wrap">
    <label class="flex-grow-1">{{label}}</label>
{% endif %}
    <div class="m-addItem{% if disabled %} -disabled{% endif %}{% if invalid %} is-invalid{% endif %}{% if valid %} is-valid{% endif %}{% if small %} -small{% endif %}{% if extra_small %} -extraSmall{% endif %} 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">
                {% render '@circle--small', {icon:"plus"}, true %}
            </div>
            {% if show_text %}
            <div class="mx-2 mt-1 text-center">
                {% if extra_small == false %}<span class="text-muted user-select">Plaats document of</span>{% endif %} <u class="user-select">bladeren</u>
            </div>
            {% endif %}
        </div>
    </div>
{% if show_label %}
    {% 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>
{% endif %}
 
{
  "label": "Maak een nieuw conceptontwerp",
  "show_label": false,
  "show_text": true,
  "invalid": false,
  "valid": false,
  "feedback_message": "Select field is invalid",
  "show_feedback": false,
  "extra_small": true,
  "disabled": false,
  "datepicker": false,
  "color": "",
  "absolute": false,
  "icon": "plus",
  "status_circle": true,
  "cursor_class": false
}

Validatie

Wanneer een veld onjuist is ingevuld moet de class .is-invalid of .is-valid toegevoegd worden aan het veld. Wanneer er een error message weergegeven moet worden gebruik dan de volgende html, zie voorbeeld:


<div class="form-group d-flex flex-wrap">
    <label class="flex-grow-1">Maak een nieuw conceptontwerp</label>

    <div class="m-addItem is-invalid 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>
    </div>

    <div class="invalid-feedback d-inline-block"><strong>This field is invalid</strong></div>
</div>

Je kunt deze .invalid-feedback of .valid-feedback div al inladen omdat deze standaard wordt verborgen, door de class .d-inline-block toe te voegen wordt deze zichtbaar.