Dropdown Menu (Component)

This directive show a dropdown menu list in element that you attach

Inputs

Property	Type	Req	Description	Default
active	Boolean	False	Show or hide list	false
items	StDropDownMenuItem[] \| StDropDownMenuGroup[]	False	List of items or groups of them to show in menu	[]
placement	StPopPlacement	False	Possible positions of menu with respect element to attach	StPopPlacement.BOTTOM_START
emptyListMessage	String	False	Message to show in case of empty list	''
selectedItem	StDropDownMenuItem \| undefined	False	Define selected item without passing as property	undefined
itemsBeforeScroll	StDropDownMenuItem \| undefined	False	Define selected item without passing as property	undefined
moveSelected	Boolean	False	If true, move selected item to top in menu when open	true
styleSelected	Boolean	False	If true, apply class selected to selected item	true
isLoading	Boolean	False	If true, show loader at the end of the list	true
offset	StPopOffset	False	For position with offset in x o y axis	{x: 0 , y: 0}
openToLeft	Boolean	False	For calculating all positions from the right corner	false
visualMode	StDropdownVisualMode	False	It is needed to specify the styles applied to the list. By default is displayed as a normal option list	StDropDownVisualMode.OPTION_LIST
keyBoardMove	Boolean	False	It is needed to activate navigation through options using the keyboard	false

Outputs

Property	Type	Description
change	StDropDownMenuItem	Event emitted when user select an item
scrollAtBottom	Any	Event emitted when scroll reach the end of the list
itemMouseEnter	StDropDownMenuItem	Event emitted when mouse is over an item
itemMouseLeave	StDropDownMenuItem	Event emitted when mouse leaves an item

Example

<st-dropdown-menu [items]="list"
      [active]="show"
      (change)="onChange(event)">
    <button class="button button-primary"
          (click)="show = !show">Show menu</button>
</st-dropdown-menu>

Models

Menu items (StDropDownMenuItem)

export class StDropDownMenuItem {
    label: string;
    value: any;
    icon ? : string;
    labelColor ? : string;
    iconColor ? : string;
    textInfo ? : string;
    selected ? : boolean;
    hasHtml ? : boolean;
    extraIcon ? : string;
    extraIconBubble ? : string;
    extraIconColor ? : string;
    [key: string]: any; // To do model more extensible if any other component needs to send more data
}