<div class="form-group d-flex flex-wrap align-items-center mb-1 -sideBySide position-relative">
<label class="mb-0">Eigenaar</label>
<div class="m-clearHover -selected rounded d-flex align-items-center">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-content="">
JT
</div>
<span class="pl-2">Jappy Toering</span>
<div class="pl-2 cursor-pointer m-clearHover__cross"><i class="icon-cross"></i></div>
</div>
</div>
<div class="form-group d-flex flex-wrap {% if add_single %}align-items-center mb-1 -sideBySide{% endif %} position-relative">
<label class="{% if add_single %}mb-0{% if info %} d-flex align-items-center{% endif %}{% else %}flex-grow-1{% endif %}">{{label}}{% if info %}<div class="d-inline-block ml-2">{% render '@circle--tiny' %}</div>{% endif %}</label>
{% if add_single %}
<div class="m-clearHover{% if selected %} -selected{% endif %} rounded d-flex align-items-center">
{% if selected %}
{% render '@avatar--full-name', {initials: "JT", text: "Jappy Toering"}, true %}
<div class="pl-2 cursor-pointer m-clearHover__cross"><i class="icon-cross"></i></div>
{% else %}
{% render '@add-item--no-box', {text:"Eigenaar toevoegen", team:true}, true %}
{% endif %}
</div>
{% else %}
{% render '@teamlist', {add_button:add_button, vertical:vertical}, true %}
{% endif %}
</div>
{
"label": "Eigenaar",
"add_button": false,
"vertical": false,
"add_single": true,
"selected": true
}
The teamlist is configured to have a maximum of 4 avatars. Every teammember after these 4 avatars should be added to the popover of the circle that contains the number of teammembers added to this popover. The number of teammembers displayed in the teamlist can be easily increased.
It is important to notice that the add button contains the data-custom-class="-teamSelect" attribute, to apply the correct styling to the popover.