DropDownButtonComponent
Represents the Kendo UI DropDownButton component for Angular.
Use the DropDownButton to display a button with a popup list of actions.
Definition
Package:@progress/kendo-angular-buttons
Selector:kendo-dropdownbutton
Export Name:Accessible in templates as #kendoDropDownButtonInstance="kendoDropDownButton"
Syntax:
@Component({
selector: 'my-app',
template: `
<kendo-dropdownbutton [data]="data">
User Settings
</kendo-dropdownbutton>
`
})
class AppComponent {
public data: Array<any> = [
{ text: 'My Profile' },
{ text: 'Friend Requests' },
{ text: 'Account Settings' },
{ text: 'Support' },
{ text: 'Log Out' }
];
}Inputs
arrowIcon
boolean | ArrowIconSettings
Displays the default arrow icon or a custom one.
false
buttonAttributes
{ [key: string]: string }
Sets attributes for the main button.
buttonClass
any
The CSS classes applied to the main button.
Supports the same values as ngClass.
data
any
Sets or gets the data of the DropDownButton. Provide the data as an array-like list.
disabled
boolean
Sets the disabled state of the DropDownButton.
When true, the button is disabled and cannot be interacted with.
Specifies the background and border styles of the DropDownButton. See DropDownButton Appearance. The default value is set by the Kendo theme.
icon
string
Specifies the name of an existing icon in the Kendo UI theme.
''
iconClass
string
Specifies a list of CSS classes for styling the button with custom icons.
''
imageUrl
string
Specifies a URL for styling the button with a custom image.
''
Configures the popup of the DropDownButton.
Specifies the border radius of the DropDownButton. See DropDownButton Appearance. The default value is set by the Kendo theme.
undefined
Specifies the padding of the DropDownButton. See DropDownButton Appearance. The default value is set by the Kendo theme.
undefined
tabIndex
number
Specifies the tabIndex of the component.
Determines the order of focus when navigating with the keyboard.
0
textField
string
Sets the data item field that represents the item text. If the data contains only primitive values, leave this undefined.
Specifies predefined theme colors for the DropDownButton. See DropDownButton Appearance.
undefined
Fields
isOpen
boolean
Returns the current open state of the popup.
Events
blur
EventEmitter<any>
Fires when the DropDownButton is blurred.
close
EventEmitter<PreventableEvent>
Fires when the popup is about to close. This event is preventable. Canceling the event keeps the popup open.
focus
EventEmitter<any>
Fires when the DropDownButton is focused.
itemClick
EventEmitter<any>
Fires when the user clicks a drop-down list item. The event data contains the data item bound to the clicked list item.
open
EventEmitter<PreventableEvent>
Fires when the popup is about to open. This event is preventable. Canceling the event keeps the popup closed.