Migrating Dropdowns from Semantic UI

In this document we'll be using SUI for ng2-semantic-ui and Bootstrap for ng-bootstrap.

See the SUI dropdown specs for more info.

SUI dropdowns follow this structure:

   <div class="ui dropdown" suiDropdown>
    ...
    <i class="dropdown icon"></i>
    <div class="menu" suiDropdownMenu>
        <button class="item"> ... </button>
        <button class="item">
            <span class="description"> ... </span>
            ...
        </button>
        <div class="divider"></div>
        <button class="item"> ... </button>
        ...
    </div>
</div>

Notes

• Everything coming before the suiDropdownMenu <div> will become part of the pulldown button; in Bootstrap that wrapped in a ngbDropdownToggle <div> element
• The dropdown icon is required to provide a visual hint, but it has no functional role: the pulldown will work either way
• On the other hand, the "ui dropdown" and "item" class declarations do have a functional role

The equivalent Boostrap component is based on ngbDropdown and ngbDropdownMenu. (See the specs for more info.)

<div class="tab-head" ngbDropdown>
    <a ngbDropdownToggle> ... </a>
    <div ngbDropdownMenu>
        <a ngbDropdownItem> ... </a>
        <a ngbDropdownItem> ... </a>
        <div class="dropdown-divider"></div>
        <a ngbDropdownItem> ... </a>
        ...
    </div>

Notes

• The "tab-head" class declaration is mandatory
• Bootstrap dropdowns don't allow description spans like their SUI counterparts, but they may contain input forms
• It is not necessary to provide a dropdown icon like SUI requires
• When using *ngFor, the class dropdown-item has to be added to the items.