Advanced User Interface Controls and Components
IntegralUI DropDownButton is a native web component for Angular, React and Vue that represents a button with option to show a dropdown list. In this article, you will find general information about the dropdown button component, including its properties, events and methods that you can use.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
The dropdown button is consisting of a label and arrow icon. By clicking on the arrow, a dropdown menu will appear showing additional options. The menu can have additional submenus.
In this example, from control panel you select whether the arrow icon is placed on left or right side and choose the direction at which the dropdown menu will popup. There are six directions to choose from:
To use the DropDown Button component you need to do the following:
@ViewChild('application', {read: ViewContainerRef, static: true}) applicationRef: ViewContainerRef;
public dropDownSettings: any;
ngAfterContentInit(){
this.dropDownSettings = {
adjustment: { top: 1, left: 0 },
appRef: this.applicationRef,
items: [
{ id: 1, text: "Item 1" },
{
id: 2,
text: "Item 2",
items: [
{ id: 21, pid: 2, text: "Item 21" },
{ id: 22, pid: 2, text: "Item 22" }
]
},
{ id: 3, type: "separator" },
{ id: 4, text: "Item 3" }
]
}
}
<iui-dropdown-button [settings]="dropDownSettings"></iui-dropdown-button>
By default, the dropdown button will show a label on left following with a separator and arrow icon on right. You can change this in your code by setting the placement and direction properties. For example, to have the arrow icon on left side set the placement value to IntegralUIPlacement.Left.
To change the direction, set this property to one of the values from IntegralUIDirection enumeration:
You can combine these values and have directions like: Above and Left, Below and Right etc. For example:
import { IntegralUIDirection, IntegralUIPlacement } from './integralui/components/integralui.core';
. . .
public buttonPlacement: IntegralUIPlacement = IntegralUIPlacement.Right;
public openDirection: IntegralUIDirection = IntegralUIDirection.Below;
// Control Panel
// An array that holds all options in the comboo box for dropdown button placement
public comboPlacement: Array;
// Determines the direction at which the dropdown list will open
public comboDirection: Array;
constructor(){
this.comboPlacement = [
{ text: "Left" },
{ text: "Right" }
];
this.comboDirection = [
{ text: "Above" },
{ text: "Left and Above" },
{ text: "Left and Below" },
{ text: "Below" },
{ text: "Right and Above" },
{ text: "Right and Below" }
];
}
// Control Panel ---------------------------------------------------------------------
onComboPlacementSelectionChanged(e: any){
switch (e.index){
case 0:
this.buttonPlacement = IntegralUIPlacement.Left;
break;
default:
this.buttonPlacement = IntegralUIPlacement.Right;
break;
}
}
onComboDirectionSelectionChanged(e: any){
switch (e.index){
case 0:
this.openDirection = IntegralUIDirection.Above;
break;
case 1:
this.openDirection = IntegralUIDirection.Left | IntegralUIDirection.Above;
break;
case 2:
this.openDirection = IntegralUIDirection.Left | IntegralUIDirection.Below;
break;
case 4:
this.openDirection = IntegralUIDirection.Right | IntegralUIDirection.Above;
break;
case 5:
this.openDirection = IntegralUIDirection.Right | IntegralUIDirection.Below;
break;
default:
this.openDirection = IntegralUIDirection.Below;
break;
}
}
<iui-dropdown-button [settings]="dropDownSettings" [placement]="buttonPlacement" [direction]="openDirection"></iui-dropdown-button>
You can use the following properties to change the appearance and behavior of the DropDownButton component:
Using the above properties, you can customize the DropDown Button component in a way best suited for your application.
Here is a list of available events:
By handling these events in your code, you can add specific actions for example when dropdown opens, closes or when menu item is clicked.
onDropDownItemClicked(e: any){
if (e.item)
alert(e.item.text + ' is clicked!');
}
<iui-dropdown-button [settings]="dropDownSettings" (itemClick)="onDropDownItemClicked($event)"></iui-dropdown-button>
The following public methods are available:
You can modify the dropdown button appearance using CSS. You can provide your own CSS classes that will override the default component appearance.
The controlStyle property accepts an object that holds the names of all CSS classes that you want to override. Here is a list of default class names that are in use:
dropDownButtonStyle = {
general: {
disabled: 'iui-dropdown-button-disabled',
focused: 'iui-dropdown-button-focused',
normal: 'iui-dropdown-button',
hovered: 'iui-dropdown-button-hovered',
selected: 'iui-dropdown-button-selected'
},
button: {
disabled: 'iui-dropdown-button-btn-disabled',
focused: 'iui-dropdown-button-btn-focused',
normal: 'iui-dropdown-button-btn',
hovered: 'iui-dropdown-button-btn-hovered',
selected: 'iui-dropdown-button-btn-selected'
}
}
IntegralUI DropDownButton is a web component that you can use in Angular, React and Vue. You can use the component to display a dropdown menu above, below, and on left or right side from the button. Using different properties and events and by providing your own CSS classes, you can customize the dropdown button appearance and behavior.
The DropDownButton component is part of IntegralUI Web.