DropDownButtonComponent
Represents the Kendo UI DropDownButton component for Angular.
@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'
}];
}
Selector
kendo-dropdownbutton
Export Name
Accessible in templates as #kendoDropDownButtonInstance="kendoDropDownButton"
Inputs
buttonClass
any
The CSS classes that will be rendered on the main button.
Supports the type of values that are supported by ngClass
.
icon
string
Defines the name of an existing icon in a Kendo UI theme.
iconClass
string
Defines the list of CSS classes which are used for styling the Button with custom icons.
imageUrl
string
Defines a URL for styling the button with a custom image.
look
Changes the visual appearance by using alternative styling options.
The available values are:
flat
outline
primary
boolean
Adds visual weight to the default button and makes it primary.
tabIndex
number
Specifies the tabIndex
of the component.
textField
string
Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
data
any
Sets or gets the data of the DropDownButton.
The data has to be provided in an array-like list.
disabled
boolean
Sets the disabled state of the DropDownButton.
popupSettings
Configures the popup of the DropDownButton.
The available options are:
animate: Boolean
—Controls the popup animation. By default, the open and close animations are enabled.popupClass: String
—Specifies a list of CSS classes that are used to style the popup.appendTo: "root" | "component" | ViewContainerRef
—Specifies the component to which the popup will be appended.align: "left" | "center" | "right"
—Specifies the alignment of the popup.
Fields
isOpen
boolean
Returns the current open state of the popup.
Events
close
EventEmitter<PreventableEvent>
Fires each time the popup is about to close. This event is preventable. If you cancel the event, the popup will remain open.
itemClick
EventEmitter<any>
Fires each time the user clicks on a drop-down list item. The event data contains the data item bound to the clicked list item.
blur
EventEmitter<any>
Fires each time the DropDownButton gets blurred.
focus
EventEmitter<any>
Fires each time the DropDownButton gets focused.
open
EventEmitter<PreventableEvent>
Fires each time the popup is about to open. This event is preventable. If you cancel the event, the popup will remain closed.
Methods
blur
Blurs the DropDownButton component.
focus
Focuses the DropDownButton component.
toggle
Toggles the visibility of the popup.
If the toggle
method is used to open or close the popup, the open
and close
events will not be fired.
Parameters
open
boolean
The state of the popup.