@progress/kendo-angular-navigation
Version:
Kendo UI Navigation for Angular
151 lines (150 loc) • 5.43 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { EventEmitter, ElementRef, Renderer2, NgZone, ChangeDetectorRef, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { BottomNavigationSelectEvent } from './events/select-event';
import { BottomNavigationItemFlow } from './types/bottomnavigation-item-flow';
import { BottomNavigationFill } from './types/bottomnavigation-fill';
import { BottomNavigationPositionMode } from './types/bottomnavigation-position-mode';
import { BottomNavigationThemeColor } from './types/bottomnavigation-theme-color';
import { BottomNavigationItemTemplateDirective } from './templates/item-template.directive';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI BottomNavigation component for Angular]({% slug overview_bottomnavigation %}).
*
* Use the BottomNavigation component to let users quickly switch between primary views in your app.
*
* @example
* ```typescript
* @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'}
* ];
* }
* ```
*/
export declare class BottomNavigationComponent implements OnInit, AfterViewInit, OnDestroy {
private localization;
private hostElement;
private ngZone;
private changeDetector;
private renderer;
/**
* Provides the collection of items rendered in the BottomNavigation ([see example]({% slug items_bottomnavigation %})).
*/
items: any[];
/**
* Shows a top border on the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
*
* @default false
*/
border: boolean;
/**
* Disables the entire BottomNavigation.
*
* @default false
*/
disabled: boolean;
/**
* Sets the fill style of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
*
* @default 'flat'
*/
set fill(fill: BottomNavigationFill);
get fill(): BottomNavigationFill;
/**
* Controls how the icon and text label are positioned in the BottomNavigation items.
*
* @default 'vertical'
*/
set itemFlow(itemFlow: BottomNavigationItemFlow);
get itemFlow(): BottomNavigationItemFlow;
/**
* Sets the position and behavior of the BottomNavigation when the page is scrollable ([see example]({% slug positioning_bottomnavigation %})).
*
* @default 'fixed'
*/
set positionMode(positionMode: BottomNavigationPositionMode);
get positionMode(): BottomNavigationPositionMode;
/**
* Sets the theme color of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
*
* @default 'primary'
*/
set themeColor(themeColor: BottomNavigationThemeColor);
get themeColor(): BottomNavigationThemeColor;
/**
* Fires when a user selects an item. This event is preventable.
*/
select: EventEmitter<BottomNavigationSelectEvent>;
/**
* @hidden
*/
hostClass: boolean;
/**
* @hidden
*/
get borderClass(): boolean;
/**
* @hidden
*/
get disabledClass(): boolean;
/**
* @hidden
*/
role: string;
/**
* @hidden
*/
direction: string;
/**
* @hidden
*/
itemTemplate: BottomNavigationItemTemplateDirective;
/**
* @hidden
*/
selectedIdx: number;
private _fill;
private _itemFlow;
private _positionMode;
private _themeColor;
private _nativeHostElement;
private dynamicRTLSubscription;
private subscriptions;
private rtl;
constructor(localization: LocalizationService, hostElement: ElementRef, ngZone: NgZone, changeDetector: ChangeDetectorRef, renderer: Renderer2);
/**
* @hidden
*/
ngOnInit(): void;
/**
* @hidden
*/
ngAfterViewInit(): void;
/**
* @hidden
*/
ngOnDestroy(): void;
/**
* @hidden
*/
selectItem(idx: number, args: any): void;
private applyClasses;
private initDomEvents;
private clickHandler;
private keyDownHandler;
private getBottomNavigationItemIndex;
static ɵfac: i0.ɵɵFactoryDeclaration<BottomNavigationComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<BottomNavigationComponent, "kendo-bottomnavigation", ["kendoBottomNavigation"], { "items": { "alias": "items"; "required": false; }; "border": { "alias": "border"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "fill": { "alias": "fill"; "required": false; }; "itemFlow": { "alias": "itemFlow"; "required": false; }; "positionMode": { "alias": "positionMode"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; }, { "select": "select"; }, ["itemTemplate"], never, true, never>;
}