igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
210 lines (209 loc) • 6.25 kB
TypeScript
import { ElementRef, EventEmitter } from '@angular/core';
import { IgxIconComponent } from '../icon/icon.component';
import { IToggleView } from '../core/navigation';
import { CancelableEventArgs, IBaseEventArgs } from '../core/utils';
import { ToggleAnimationSettings } from '../expansion-panel/toggle-animation-component';
import { IBannerResourceStrings } from '../core/i18n/banner-resources';
import * as i0 from "@angular/core";
export interface BannerEventArgs extends IBaseEventArgs {
event?: Event;
}
export interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventArgs {
}
/**
* **Ignite UI for Angular Banner** -
* [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner.html)
*
* The Ignite UI Banner provides a highly template-able and easy to use banner that can be shown in your application.
*
* Usage:
*
* ```html
* <igx-banner #banner>
* Our privacy settings have changed.
* <igx-banner-actions>
* <button type="button" igxButton="contained">Read More</button>
* <button type="button" igxButton="contained">Accept and Continue</button>
* </igx-banner-actions>
* </igx-banner>
* ```
*/
export declare class IgxBannerComponent implements IToggleView {
elementRef: ElementRef<HTMLElement>;
/**
* @hidden
*/
bannerIcon: IgxIconComponent;
/**
* Fires after the banner shows up
* ```typescript
* public handleOpened(event) {
* ...
* }
* ```
* ```html
* <igx-banner (opened)="handleOpened($event)"></igx-banner>
* ```
*/
opened: EventEmitter<BannerEventArgs>;
/**
* Fires before the banner shows up
* ```typescript
* public handleOpening(event) {
* ...
* }
* ```
* ```html
* <igx-banner (opening)="handleOpening($event)"></igx-banner>
* ```
*/
opening: EventEmitter<BannerCancelEventArgs>;
/**
* Fires after the banner hides
* ```typescript
* public handleClosed(event) {
* ...
* }
* ```
* ```html
* <igx-banner (closed)="handleClosed($event)"></igx-banner>
* ```
*/
closed: EventEmitter<BannerEventArgs>;
/**
* Fires before the banner hides
* ```typescript
* public handleClosing(event) {
* ...
* }
* ```
* ```html
* <igx-banner (closing)="handleClosing($event)"></igx-banner>
* ```
*/
closing: EventEmitter<BannerCancelEventArgs>;
/** @hidden */
get useDefaultTemplate(): boolean;
/**
* Set the animation settings used by the banner open/close methods
* ```typescript
* import { slideInLeft, slideOutRight } from 'igniteui-angular';
* ...
* banner.animationSettings: ToggleAnimationSettings = { openAnimation: slideInLeft, closeAnimation: slideOutRight };
* ```
*/
set animationSettings(settings: ToggleAnimationSettings);
/**
* Get the animation settings used by the banner open/close methods
* ```typescript
* let currentAnimations: ToggleAnimationSettings = banner.animationSettings
* ```
*/
get animationSettings(): ToggleAnimationSettings;
/**
* Gets/Sets the resource strings.
*
* @remarks
* By default it uses EN resources.
*/
set resourceStrings(value: IBannerResourceStrings);
get resourceStrings(): IBannerResourceStrings;
/**
* Gets/Sets whether the banner is expanded (visible) or collapsed (hidden).
* Defaults to `false`.
* Setting to `true` opens the banner, while `false` closes it.
*
* @example
* // Expand the banner
* banner.expanded = true;
*
* @example
* // Collapse the banner
* banner.expanded = false;
*
* @example
* // Check if the banner is expanded
* const isExpanded = banner.expanded;
*/
get expanded(): boolean;
set expanded(value: boolean);
/**
* Gets whether the banner is collapsed.
*
* ```typescript
* const isCollapsed: boolean = banner.collapsed;
* ```
*/
get collapsed(): boolean;
/**
* Returns the native element of the banner component
* ```typescript
* const myBannerElement: HTMLElement = banner.element;
* ```
*/
get element(): HTMLElement;
cssClass: string;
/**
* @hidden
*/
get displayStyle(): string;
private _expansionPanel;
private _bannerActionTemplate;
private _expanded;
private _shouldFireEvent;
private _bannerEvent;
private _animationSettings;
private _resourceStrings;
constructor(elementRef: ElementRef<HTMLElement>);
/**
* Opens the banner
*
* ```typescript
* myBanner.open();
* ```
*
* ```html
* <igx-banner #banner>
* ...
* </igx-banner>
* <button type="button" (click)="banner.open()">Open Banner</button>
* ```
*/
open(event?: Event): void;
/**
* Closes the banner
*
* ```typescript
* myBanner.close();
* ```
*
* ```html
* <igx-banner #banner>
* ...
* </igx-banner>
* <button type="button" (click)="banner.close()">Close Banner</button>
* ```
*/
close(event?: Event): void;
/**
* Toggles the banner
*
* ```typescript
* myBanner.toggle();
* ```
*
* ```html
* <igx-banner #banner>
* ...
* </igx-banner>
* <button type="button" (click)="banner.toggle()">Toggle Banner</button>
* ```
*/
toggle(event?: Event): void;
/** @hidden */
onExpansionPanelOpen(): void;
/** @hidden */
onExpansionPanelClose(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxBannerComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxBannerComponent, "igx-banner", never, { "animationSettings": { "alias": "animationSettings"; "required": false; }; "resourceStrings": { "alias": "resourceStrings"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; }, { "opened": "opened"; "opening": "opening"; "closed": "closed"; "closing": "closing"; }, ["bannerIcon", "_bannerActionTemplate"], ["igx-icon", "*", "igx-banner-actions"], true, never>;
}