BottomNavigationComponent
Represents the Kendo UI BottomNavigation component for Angular.
@Component({
selector: 'my-app',
template: `
<kendo-bottomnavigation [items]="items"></kendo-bottomnavigation>
`
})
class AppComponent {
public items: Array<any> = [
{ text: 'Inbox', icon: 'envelop', selected: true },
{ text: 'Calendar', icon: 'calendar'},
{ text: 'Profile', icon: 'user'}
]
}
Selector
kendo-bottomnavigation
Export Name
Accessible in templates as #kendoBottomNavigationInstance="kendoBottomNavigation"
Inputs
Name | Type | Default | Description |
---|---|---|---|
border |
|
|
Sets a top border to the BottomNavigation (see example). |
disabled |
|
|
Disables the whole BottomNavigation. |
fill |
|
The fill style of the BottomNavigation (see example).
| |
itemFlow |
|
Specifies how the icon and text label are positioned in the BottomNavigation items. The possible values are:
| |
items |
|
The collection of items that will be rendered in the BottomNavigation (see example). | |
positionMode |
|
Specifies the position and behavior of the BottomNavigation when the page is scrollable (see example). The possible values are:
| |
themeColor |
|
Specifies the theme color of the BottomNavigation (see example).
|
Events
Name | Type | Description |
---|---|---|
select |
|
Fires each time an item is selected. This event is preventable. |