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: 'email', selected: true },
{ text: 'Calendar', icon: 'calendar'},
{ text: 'Profile', icon: 'user'}
]
}
Selector
kendo-bottomnavigation
Export Name
Accessible in templates as #kendoBottomNavigationInstance="kendoBottomNavigation"
Inputs
border
boolean
(default: false) Sets a top border to the BottomNavigation (see example).
disabled
boolean
(default: false) Disables the whole BottomNavigation.
items
any[]
The collection of items that will be rendered in the BottomNavigation (see example).
fill
The fill style of the BottomNavigation (see example).
- The possible values are:
- (Default)
flat
solid
itemFlow
Specifies how the icon and text label are positioned in the BottomNavigation items (see example).
The possible values are:
- (Default)
vertical
- Renders the text below the icon. horizontal
- Renders the icon and the text on the same line.
positionMode
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
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
select
Fires each time an item is selected. This event is preventable.