BottomNavigationComponent

Represents the Kendo UI BottomNavigation component for Angular.

ts

@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	boolean	false	Sets a top border to the BottomNavigation (see example).
disabled	boolean	false	Disables the whole BottomNavigation.
fill	BottomNavigationFill		The fill style of the BottomNavigation (see example). The possible values are: (Default) flat solid
itemFlow	BottomNavigationItemFlow		Specifies how the icon and text label are positioned in the BottomNavigation items. The possible values are: (Default) vertical - Renders the text below the icon. horizontal - Renders the icon and the text on the same line.
items	any[]		The collection of items that will be rendered in the BottomNavigation (see example).
positionMode	BottomNavigationPositionMode		Specifies the position and behavior of the BottomNavigation when the page is scrollable (see example). The possible values are: (Default) fixed - The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position. sticky - Positions the BottomNavigation at the end of the scrollable container.
themeColor	BottomNavigationThemeColor		Specifies the theme color of the BottomNavigation (see example). The possible values are: (Default) primary - Applies coloring based on the primary theme color. secondary - Applies coloring based on the secondary theme color. tertiary - Applies coloring based on the tertiary theme color. info - Applies coloring based on the info theme color. success - Applies coloring based on the success theme color. warning - Applies coloring based on the warning theme color. error - Applies coloring based on the error theme color. dark - Applies coloring based on the dark theme color. light - Applies coloring based on the light theme color. inverse - Applies coloring based on the inverted theme color.

Events

Name	Type	Description
select	EventEmitter<BottomNavigationSelectEvent>	Fires each time an item is selected. This event is preventable.