igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
315 lines (314 loc) • 8.49 kB
TypeScript
import { AfterContentInit, AfterViewChecked, AfterViewInit, ElementRef, EventEmitter, QueryList, TemplateRef } from '@angular/core';
export interface ISelectTabEventArgs {
tab: IgxTabComponent;
panel: IgxTabPanelComponent;
}
export declare class IgxTabTemplateDirective {
template: TemplateRef<any>;
constructor(template: TemplateRef<any>);
}
/**
* **Ignite UI for Angular Tab Bar** -
* [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabbar.html)
*
* The Ignite UI Tab Bar enables the user to navigate among a number of content panels displayed in a single view.
*
* Example:
* ```html
* <igx-bottom-nav>
* <igx-tab-panel label="Tab 1">Tab 1 Content</igx-tab-panel>
* <igx-tab-panel label="Tab 2">Tab 2 Content</igx-tab-panel>
* <igx-tab-panel label="Tab 3">Tab 3 Content</igx-tab-panel>
* </igx-bottom-nav>
* ```
*/
export declare class IgxBottomNavComponent implements AfterViewInit {
private _element;
/**
* Gets the `IgxTabComponent` elements in the tab bar component.
* ```typescript
* let tabs: QueryList<IgxTabComponent> = this.tabBar.tabs;
* ```
* @memberof IgxBottomNavComponent
*/
tabs: QueryList<IgxTabComponent>;
/**
* Gets the `IgxTabPanelComponent` elements in the tab bar component.
* ```typescript
* let tabPanels: QueryList<IgxTabPanelComponent> = this.tabBar.panels;
* ```
* @memberof IgxBottomNavComponent
*/
panels: QueryList<IgxTabPanelComponent>;
/**
* Sets/gets the `id` of the tab bar.
* If not set, the `id` of the first tab bar component will be `"igx-bottom-nav-0"`.
* ```html
* <igx-bottom-nav id = "my-first-tab-bar"></igx-bottom-nav>
* ```
* ```typescript
* let tabBarId = this.tabBar.id;
* ```
* @memberof IgxBottomNavComponent
*/
id: string;
/**
* Emits an event when a new tab is selected.
* Provides references to the `IgxTabComponent` and `IgxTabPanelComponent` as event arguments.
* ```html
* <igx-bottom-nav (onTableSelected) = "onTabSelected($event)"><igx-bottom-nav>
* ```
* @memberof IgxBottomNavComponent
*/
onTabSelected: EventEmitter<ISelectTabEventArgs>;
/**
* Emits an event when a tab is deselected.
* Provides references to the `IgxTabComponent` and `IgxTabPanelComponent` as event arguments.
* ```html
* <igx-bottom-nav (onTabDeselected) = "onTabDeselected($event)"><igx-bottom-nav>
* ```
* @memberof IgxBottomNavComponent
*/
onTabDeselected: EventEmitter<ISelectTabEventArgs>;
/**
* Gets the `index` of selected tab/panel in the respective collection.
* ```typescript
* let index = this.tabBar.selectedIndex;
* ```
* @memberof IgxBottomNavComponent
*/
selectedIndex: number;
/**
* Gets the `itemStyle` of the tab bar.
* ```typescript
* let itemStyle = this.tabBar.itemStyle;
* ```
* @memberof IgxBottomNavComponent
*/
readonly itemStyle: string;
/**
*@hidden
*/
private _itemStyle;
/**
* Gets the selected tab in the tab bar.
* ```typescript
* let tab = this.tabBar.selectedTab;
* ```
* @memberof IgxBottomNavComponent
*/
readonly selectedTab: IgxTabComponent;
constructor(_element: ElementRef);
/**
*@hidden
*/
ngAfterViewInit(): void;
/**
*@hidden
*/
_selectedPanelHandler(args: any): void;
/**
*@hidden
*/
private _deselectPanel;
}
export declare class IgxTabPanelComponent implements AfterContentInit, AfterViewChecked {
private _tabBar;
private _element;
/**
*@hidden
*/
private _itemStyle;
/**
* Sets/gets the `label` of the tab panel.
* ```html
* <igx-tab-panel [label] = "'Tab panel label'"><igx-tab-panel>
* ```
* ```typescript
* let tabPanelLabel = this.tabPanel.label;
* ```
* @memberof IgxTabPanelComponent
*/
label: string;
/**
* Sets/gets the `icon` of the tab panel.
* ```html
* <igx-tab-panel [icon] = "panel_icon"><igx-tab-panel>
* ```
* ```typescript
* let tabPanelIcon = this.tabPanel.icon;
* ```
* @memberof IgxTabPanelComponent
*/
icon: string;
/**
* Sets/gets whether the tab panel is disabled.
* ```html
* <igx-tab-panel [disabled] = "true"><igx-tab-panel>
* ```
* ```typescript
* let isDisabled = this.tabPanel.disabled;
* ```
* @memberof IgxTabPanelComponent
*/
disabled: boolean;
/**
* Gets the role of the tab panel.
* ```typescript
* let tabPanelRole = this.tabPanel.role;
* ```
* @memberof IgxTabPanelComponent
*/
role: string;
/**
* Gets whether a tab panel will have `igx-bottom-nav__panel` class.
* ```typescript
* let styleClass = this.tabPanel.styleClass;
* ```
* @memberof IgxTabPanelComponent
*/
readonly styleClass: boolean;
/**
* Sets/gets whether a tab panel is selected.
* ```typescript
* this.tabPanel.isSelected = true;
* ```
* ```typescript
* let isSelected = this.tabPanelIsSelected;
* ```
* @memberof IgxTabPanelComponent
*/
isSelected: boolean;
/**
* Gets the `itemStyle` of the tab panel.
* ```typescript
* let itemStyle = this.tabPanel.itemStyle;
* ```
* @memberof IgxTabPanelComponent
*/
readonly itemStyle: string;
/**
* Gets the tab associated with the panel.
* ```typescript
* let tab = this.tabPanel.relatedTab;
* ```
* @memberof IgxTabPanelComponent
*/
readonly relatedTab: IgxTabComponent;
/**
* Gets the index of a panel in the panels collection.
* ```typescript
* let panelIndex = this.tabPanel.index
* ```
* @memberof IgxTabPanelComponent
*/
readonly index: number;
/**
* Gets the tab template.
* ```typescript
* let tabTemplate = this.tabPanel.customTabTemplate
* ```
* @memberof IgxTabPanelComponent
*/
/**
* Sets the tab template.
* ```typescript
* this.tabPanel.customTabTemplate(tabTemplate);
* ```
* @memberof IgxTabPanelComponent
*/
customTabTemplate: TemplateRef<any>;
/**
*@hidden
*/
private _tabTemplate;
/**
*@hidden
*/
protected tabTemplate: IgxTabTemplateDirective;
constructor(_tabBar: IgxBottomNavComponent, _element: ElementRef);
/**
*@hidden
*/
ngAfterContentInit(): void;
/**
*@hidden
*/
ngAfterViewChecked(): void;
/**
* Selects the current tab and the tab panel.
* ```typescript
* this.tabPanel.select();
* ```
* @memberof IgxTabPanelComponent
*/
select(): void;
}
export declare class IgxTabComponent {
private _tabBar;
private _element;
/**
* Gets the `role` attribute.
* ```typescript
* let tabRole = this.tab.role;
* ```
* @memberof IgxTabComponent
*/
role: string;
/**
* Gets the panel associated with the tab.
* ```typescript
* let tabPanel = this.tab.relatedPanel;
* ```
* @memberof IgxTabComponent
*/
relatedPanel: IgxTabPanelComponent;
/**
*@hidden
*/
private _changesCount;
/**
* Gets the changes and updates accordingly applied to the tab.
*
* @memberof IgxTabComponent
*/
readonly changesCount: number;
/**
* Gets whether the tab is disabled.
* ```typescript
* let isDisabled = this.tab.disabled;
* ```
* @memberof IgxTabComponent
*/
readonly disabled: boolean;
/**
* Gets whether the tab is selected.
* ```typescript
* let isSelected = this.tab.isSelected;
* ```
* @memberof IgxTabComponent
*/
readonly isSelected: boolean;
/**
* Gets the `index` of the tab.
* ```typescript
* let tabIndex = this.tab.index;
* ```
* @memberof IgxTabComponent
*/
readonly index: number;
constructor(_tabBar: IgxBottomNavComponent, _element: ElementRef);
/**
* Selects the current tab and the associated panel.
* ```typescript
* this.tab.select();
* ```
* @memberof IgxTabComponent
*/
select(): void;
}
/**
* @hidden
*/
export declare class IgxBottomNavModule {
}