Fijn

Dropdown component: Icon Left 

<div class="dropdown">
    <button class="btn btn-outline-dark btn-block dropdown-toggle d-flex align-items-center" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
        <i class="icon-profile text-body mr-2"></i>
        <span class="d-inline-block d-xxxl-none"></span>
        <span class="d-none d-xxxl-inline-block">Label</span>
    </button>
    <div class="dropdown-menu -search" aria-labelledby="dropdownMenuButton">

        <div class="m-searchInput">
            <span class="d-block d-xxxxl-none">
                <input type="search" class="form-control" id="search" placeholder="Zoeken">
            </span>
            <span class="d-none d-xxxxl-block">
                <input type="search" class="form-control" id="search" placeholder="Zoeken">
            </span>
            <i class=" icon-search cursor-pointer"></i>
        </div>
        <div class="dropdown-item active">Bestellingen van iedereen</div>
        <div class="dropdown-item">Mijn bestellingen</div>
        <div class="dropdown-divider"></div>
        <div class="m-teamSelect js-teamSelect">
            <i class="m-teamSelect__noresults">No matching results</i>
            <ul class="m-teamSelect__list js-teamSelectItems list-unstyled mb-0 mt-2">

                <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                    <div tabindex="0" class="a-avatar bg-default rounded-circle d-inline-flex justify-content-center align-items-center" ">
    MV
    
</div>

<span class=" pl-2">Marcella Vonk</span>
                </li>

                <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                    <div tabindex="0" class="a-avatar bg-turquoise rounded-circle d-inline-flex justify-content-center align-items-center" ">
    DW
    
</div>

<span class=" pl-2">Daniëlle van der Wei</span>
                </li>

                <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                    <div tabindex="0" class="a-avatar bg-pink rounded-circle d-inline-flex justify-content-center align-items-center" ">
    FA
    
</div>

<span class=" pl-2">Ferry van Asperen</span>
                </li>

                <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                    <div tabindex="0" class="a-avatar bg-green rounded-circle d-inline-flex justify-content-center align-items-center" ">
    IP
    
</div>

<span class=" pl-2">Isabel Pedersen</span>
                </li>

                <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                    <div tabindex="0" class="a-avatar bg-blue rounded-circle d-inline-flex justify-content-center align-items-center" ">
    RG
    
</div>

<span class=" pl-2">Robert Giezen</span>
                </li>

                <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                    <div tabindex="0" class="a-avatar bg-orange rounded-circle d-inline-flex justify-content-center align-items-center" ">
    JT
    
</div>

<span class=" pl-2">Jappy Toering</span>
                </li>

                <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                    <div tabindex="0" class="a-avatar bg-lightgreen rounded-circle d-inline-flex justify-content-center align-items-center" ">
    RV
    
</div>

<span class=" pl-2">Ruerd Visser</span>
                </li>

                <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                    <div tabindex="0" class="a-avatar bg-lightpink rounded-circle d-inline-flex justify-content-center align-items-center" ">
    RW
    
</div>

<span class=" pl-2">Robin Woudstra</span>
                </li>

            </ul>
        </div>

    </div>
</div>
 
<div class="dropdown">
    <button class="btn btn-outline-dark btn-block dropdown-toggle d-flex align-items-center" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
        {% if icon %}<i class="icon-{{icon}} text-body mr-2"></i>{% endif %}
        <span class="d-inline-block d-xxxl-none">{% if team or phase or tags %}{{text_mobile}}{% else %}{{text}}{% endif %}</span>
        <span class="d-none d-xxxl-inline-block">{{text}}</span>
    </button>
    <div class="dropdown-menu{% if search %} -search{% endif %}" aria-labelledby="dropdownMenuButton">
        {% if team %}
            {% render "@search-input", {label:"Zoeken"}, true %}
            <div class="dropdown-item active">Bestellingen van iedereen</div>
            <div class="dropdown-item">Mijn bestellingen</div>
            <div class="dropdown-divider"></div>
            {% render '@team-select' %}
        {% elif phase %}
            <div class="dropdown-item active">Alle fases</div>
            <div class="dropdown-item">Bestelling</div>
            <div class="dropdown-item">Offerte</div>
            <div class="dropdown-item">Welstand</div>
            <div class="dropdown-item">Contract</div>
            <div class="dropdown-item">Vergunning</div>
            <div class="dropdown-item">Voorbereiding verkoop</div>
            <div class="dropdown-item">Verkoop</div>
            <div class="dropdown-item">Personalisatie</div>
            <div class="dropdown-item">Bevestiging bestelling</div>
        {% elif tags %}
            <div class="dropdown-item active">Alle tags</div>
            <div class="dropdown-item">Communicatie</div>
            <div class="dropdown-item">Takenlijst</div>
            <div class="dropdown-item">Navigatie</div>
            <div class="dropdown-item">Buttons</div>
        {% else %}
            <div class="dropdown-item active">Dropdown item</div>
            <div class="dropdown-item">Dropdown item</div>
            <div class="dropdown-item">Dropdown item</div>
            <div class="dropdown-item">Dropdown item</div>
            <div class="dropdown-item">Dropdown item</div>
            <div class="dropdown-item">Dropdown item</div>
        {% endif %}
    </div>
</div>
 
{
  "text": "Label",
  "text_mobile": "",
  "icon": "profile",
  "search": true,
  "tags": false,
  "team": true
}

No notes defined.