Dropdown Component

The Dropdown Component requires two descendant elements with the following classes:

Component Inputs

This Component does not have any inputs

Component Outputs

Parameter Name Description Required
toggled Emits true when the dropdown is opened and false when it is closed. False

Example 1: Simple Dropdown Menu

CODE

<sme-dropdown> <button role="button" class="sme-dropdown-toggle"> <span >Menu</span> <span class="sme-icon sme-icon-chevronDown"></span> </button> <ul role="menu" class="sme-dropdown-content"> <li> <a>Item 1</a> </li> <li> <a>Item 2</a> </li> </ul> </sme-dropdown>

Example 2: Advanced Dropdown Content

CODE

<sme-dropdown> <button role="button" class="sme-dropdown-toggle"> <span>Dropdown</span> <span class="sme-icon sme-icon-chevronDown"></span> </button> <ul role="menu" class="sme-dropdown-content" style="width:300px"> <sme-data-table class="sme-dropdown-interaction-enabled" [items]="data"> <sme-data-table-column field="name" header="Name" [sortable]="true"> </sme-data-table-column> <sme-data-table-column field="value" header=" value" [sortable]="true"> </sme-data-table-column> </sme-data-table> </div> </sme-dropdown>