tgui-angular
Version:
🚀 Angular UI library for Telegram Web Apps with modern components and theming support | 💼 Author is open to work opportunities | 📧 Contact: a.blagovestnov@gmail.com | 💬 Telegram: @ablagovestnov
87 lines (86 loc) • 4.57 kB
TypeScript
import { EventEmitter, TemplateRef } from '@angular/core';
import { PlatformService } from '../../../services/platform.service';
import * as i0 from "@angular/core";
/**
* The `Banner` component renders a prominent graphical element, typically displayed at the top of a page or section,
* designed to grab the user's attention and convey important information.
* It is a versatile tool used for various purposes such as branding, promotion, announcements, or navigation.
*
* ## Usage
*
* ```html
* <tgui-banner
* type="inline"
* (onCloseIcon)="onCloseIcon($event)"
* [beforeTemplate]="beforeTemplate"
* [calloutTemplate]="calloutTemplate"
* [headerTemplate]="headerTemplate"
* [descriptionTemplate]="descriptionTemplate"
* [buttonsTemplate]="buttonsTemplate"
* [backgroundTemplate]="backgroundTemplate">
* </tgui-banner>
*
* <ng-template #beforeTemplate>
* <tgui-icon24-qr></tgui-icon24-qr>
* </ng-template>
*
* <ng-template #calloutTemplate>
* Urgent notification
* </ng-template>
*
* <ng-template #headerTemplate>
* Introducing TON Space
* </ng-template>
*
* <ng-template #descriptionTemplate>
* Start exploring TON in a new, better way
* </ng-template>
*
* <ng-template #buttonsTemplate>
* <tgui-button size="s">Try it out</tgui-button>
* <tgui-button size="s" mode="plain">Maybe later</tgui-button>
* </ng-template>
* ```
*
* ## Template Inputs
*
* The component accepts the following template inputs:
*
* - `beforeTemplate`: Optional template displayed at the start of the banner, useful for icons
* - `calloutTemplate`: Optional template for callout text displayed above the header
* - `headerTemplate`: Template for main header/title of the banner
* - `subheaderTemplate`: Optional template for text displayed below the header
* - `descriptionTemplate`: Optional template for descriptive text
* - `backgroundTemplate`: Optional template for background content
* - `buttonsTemplate`: Optional template for action buttons
*/
export declare class BannerComponent {
onCloseIcon: EventEmitter<MouseEvent>;
protected platformService: PlatformService;
private elementRef;
/** Specifies the banner's layout style, which can affect its positioning and styling. */
type: import("@angular/core").InputSignal<"section" | "inline">;
/** The close icon to use. Can be overridden by input */
closeIcon: import("@angular/core").InputSignal<string | undefined>;
/** Template displayed at the start of the banner, useful for icons */
beforeTemplate: import("@angular/core").InputSignal<TemplateRef<any> | null>;
/** Template for callout text displayed above the header */
calloutTemplate: import("@angular/core").InputSignal<TemplateRef<any> | null>;
/** Template for main header/title of the banner */
headerTemplate: import("@angular/core").InputSignal<TemplateRef<any> | null>;
/** Template for text displayed below the header */
subheaderTemplate: import("@angular/core").InputSignal<TemplateRef<any> | null>;
/** Template for descriptive text */
descriptionTemplate: import("@angular/core").InputSignal<TemplateRef<any> | null>;
/** Template for background content */
backgroundTemplate: import("@angular/core").InputSignal<TemplateRef<any> | null>;
/** Template for action buttons */
buttonsTemplate: import("@angular/core").InputSignal<TemplateRef<any> | null>;
isIOS: boolean;
/**
* Determines which close icon to use based on platform and background
*/
getCloseIconName(): string;
static ɵfac: i0.ɵɵFactoryDeclaration<BannerComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<BannerComponent, "tgui-banner", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "closeIcon": { "alias": "closeIcon"; "required": false; "isSignal": true; }; "beforeTemplate": { "alias": "beforeTemplate"; "required": false; "isSignal": true; }; "calloutTemplate": { "alias": "calloutTemplate"; "required": false; "isSignal": true; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; "isSignal": true; }; "subheaderTemplate": { "alias": "subheaderTemplate"; "required": false; "isSignal": true; }; "descriptionTemplate": { "alias": "descriptionTemplate"; "required": false; "isSignal": true; }; "backgroundTemplate": { "alias": "backgroundTemplate"; "required": false; "isSignal": true; }; "buttonsTemplate": { "alias": "buttonsTemplate"; "required": false; "isSignal": true; }; }, { "onCloseIcon": "onCloseIcon"; }, never, never, true, never>;
}