@synergy-design-system/angular
Version:
Angular wrappers for the Synergy Design System
56 lines (53 loc) • 2.25 kB
TypeScript
import * as i0 from '@angular/core';
import { ElementRef, NgZone, EventEmitter } from '@angular/core';
import { SynTab, SynCloseEvent } from '@synergy-design-system/components';
export { SynCloseEvent } from '@synergy-design-system/components';
/**
* @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab--docs
* @status stable
* @since 2.0
*
* @dependency syn-icon-button
*
* @slot - The tab's label.
*
* @event syn-close - Emitted when the tab is closable and the close button is activated.
*
* @csspart base - The component's base wrapper.
* @csspart close-button - The close button, an `<syn-icon-button>`.
* @csspart close-button__base - The close button's exported `base` part.
*/
declare class SynTabComponent {
nativeElement: SynTab;
private _ngZone;
constructor(e: ElementRef, ngZone: NgZone);
/**
* The name of the tab panel this tab is associated with.
* The panel must be located in the same tab group.
*/
set panel(v: SynTab['panel']);
get panel(): SynTab['panel'];
/**
* Draws the tab in an active state.
*/
set active(v: '' | SynTab['active']);
get active(): SynTab['active'];
/**
* Makes the tab closable and shows a close button.
*/
set closable(v: '' | SynTab['closable']);
get closable(): SynTab['closable'];
/**
* Disables the tab and prevents selection.
*/
set disabled(v: '' | SynTab['disabled']);
get disabled(): SynTab['disabled'];
/**
* Emitted when the tab is closable and the close button is activated.
*/
synCloseEvent: EventEmitter<SynCloseEvent>;
static ɵfac: i0.ɵɵFactoryDeclaration<SynTabComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SynTabComponent, "syn-tab", never, { "panel": { "alias": "panel"; "required": false; }; "active": { "alias": "active"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "synCloseEvent": "synCloseEvent"; }, never, ["*"], true, never>;
}
export { SynTabComponent };