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
Name | Type | Default | Description |
---|---|---|---|
arrowIcon |
|
|
Allows showing the default arrow icon or providing alternative one instead. |
buttonAttributes |
|
Sets attributes to the main button. | |
buttonClass |
|
The CSS classes that will be rendered on the main button.
Supports the type of values that are supported by | |
data |
|
Sets or gets the data of the DropDownButton.
| |
disabled |
|
Sets the disabled state of the DropDownButton. | |
fillMode |
|
The fillMode property specifies the background and border styles of the DropDownButton (see example). The available values are:
| |
icon |
|
Defines the name of an existing icon in the Kendo UI theme. | |
iconClass |
|
Defines the list of CSS classes which are used for styling the Button with custom icons. | |
imageUrl |
|
Defines a URL for styling the button with a custom image. | |
popupSettings |
|
Configures the popup of the DropDownButton. The available options are:
| |
rounded |
|
The rounded property specifies the border radius of the DropDownButton (see example). The possible values are:
| |
size |
|
The size property specifies the padding of the DropDownButton (see example). The possible values are:
| |
svgIcon |
|
Defines an | |
tabIndex |
|
Specifies the | |
textField |
|
Sets the data item field that represents the item text. If the data contains only primitive values, do not define it. | |
themeColor |
|
The DropDownButton allows you to specify predefined theme colors. The theme color will be applied as a background and border color while also amending the text color accordingly (see example). The possible values are:
|