BottomNavigationComponent
Represents the Kendo UI BottomNavigation component for Angular.
Use the BottomNavigation component to let users quickly switch between primary views in your app.
Definition
Package:@progress/kendo-angular-navigation
Selector:kendo-bottomnavigation
Export Name:Accessible in templates as #kendoBottomNavigationInstance="kendoBottomNavigation"
Syntax:
@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'}
];
}Inputs
border
boolean
Shows a top border on the BottomNavigation (see example).
false
disabled
boolean
Disables the entire BottomNavigation.
false
Sets the fill style of the BottomNavigation (see example). The default value is set by the Kendo theme.
Controls how the icon and text label are positioned in the BottomNavigation items.
'vertical'
items
any[]
Provides the collection of items rendered in the BottomNavigation (see example).
Sets the position and behavior of the BottomNavigation when the page is scrollable (see example).
'fixed'
Sets the theme color of the BottomNavigation (see example).
Events
Fires when a user selects an item. This event is preventable.