Add item component: No Box

Current release

HTML
View
Context
Info
Notes


        
        <div class="m-addItem   -noBox d-flex align-items-center position-relative user-select-none">

    <div class="a-statusCircle">
        <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
            <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
        </svg>
    </div>
    <span class="pl-2 cursor-pointer" data-toggle-prev>Nieuw</span>

</div>


        <div class="m-addItem {% if disabled %}-disabled{% endif %} {% if cursor_class %}cursor-pointer{% endif %} -noBox d-flex align-items-center {% if absolute %}absolute cursor-pointer{% else %}position-relative{% endif %} user-select-none">
    {% if datepicker %}
        <div class="js-datepicker position-relative d-flex align-items-center m-addItem__datePicker m-clearHover {% if color %}-{{color}}{% endif %} rounded" data-min-date="today" data-wrap="true">
            {% render '@circle--add-date', {text:text, color:color}, true %}
            <div class="m-clearHover__inputWrap d-inline-flex align-items-center position-relative {% if color %}text-{{color}}{% endif %}">
                <span class="{% if color == 'success' %}d-flex{% else %}d-none{% endif %} align-items-center pl-2 pr-1 cursor-pointer" data-toggle>{% if color == "danger" %}Gisteren{% else %}Vandaag{% endif %}</span>
                <input type="text" readonly class="{% if color == 'success' %}-hide{% endif %} cursor-pointer pl-2" value="20-11-2024" data-input placeholder="{{text}}">
                <span class="pl-2 m-clearHover__datePickerText cursor-pointer" data-toggle>{{text}}</span>
            </div>
            <div class="pl-1 cursor-pointer m-clearHover__cross position-relative" data-clear><i class="icon-cross"></i></div>
        </div>
    {% elif absolute %}
    
        {% render '@circle', {size:"avatar", icon:"plus"}, true %}
        <div class="ml-2">
            <span class="text-muted">Plaats document of</span> <u class="user-select">bladeren</u>
        </div>
    {% elif status_circle %}    
        {% render '@status-circle' %}
        <span class="pl-2 cursor-pointer" data-toggle-prev>{{text}}</span>
    {% else %}       
         {% render '@circle--avatar' %}
        <span class="pl-2 cursor-pointer" data-toggle-prev>{{text}}</span>
    {% endif %}
    
</div>


        
            
            {
  "label": "Maak een nieuw conceptontwerp",
  "show_label": true,
  "show_text": false,
  "invalid": false,
  "valid": false,
  "feedback_message": "Select field is invalid",
  "show_feedback": false,
  "extra_small": false,
  "disabled": false,
  "datepicker": false,
  "color": "",
  "absolute": false,
  "icon": "plus",
  "status_circle": true,
  "cursor_class": false,
  "text": "Nieuw"
}

Handle: @add-item--no-box
Preview:
- With layout
- Component only
Filesystem Path: templates/fractal/molecules/add-item/add-item--no-box.njk
References (4): @circle--add-date, @circle, @status-circle, @circle--avatar
Referenced by (23): @datepicker--circle, @datepicker--circle-red, @datepicker--circle-green, @configuration-group, @configuration-group--radio, @configuration-group--notes, @configuration-group--table, @configuration-group--buttons, @configuration-group--planner, @configuration-group--planner-with-buttons, @configuration-group--documentation-checklist, @configuration-group--documentation-checklist-tabs, @configuration-group--invalid, @configuration-group--invalid-with-feedback-message, @configuration-group--valid, @configuration-group--valid-with-feedback-message, @configuration-group--disabled, @teamlist-group, @teamlist-group--with-add-button, @teamlist-group--vertical, @teamlist-group--add-single, @teamlist-group--add-single-selected, @notifications-overlap-box

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.