UNPKG

carbon-components-angular

Version:
142 lines (138 loc) 4.53 kB
/** * * carbon-angular v0.0.0 | tab.component.d.ts * * Copyright 2014, 2024 IBM * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import { OnInit, EventEmitter, TemplateRef } from "@angular/core"; import * as i0 from "@angular/core"; /** * The `Tab` component is a child of the `Tabs` component. * It represents one `Tab` item and its content within a panel of other `Tab` items. * * * `Tab` takes a string or `TemplateRef` for the header, and any content for the body of the tab. * Disabled states should be handled by the application (ie. switch to the tab, but display some * indication as to _why_ the tab is disabled). * * When the tab is selected the `select` output will be triggered. * The `select` output will also be triggered for the active tab when the tabs are loaded or updated. * * * Tab with string header: * * ```html * <cds-tab heading='tab1'> * tab 1 content * </cds-tab> * ``` * * Tab with custom header: * * ```html * <ng-template #tabHeading> * <svg cdsIcon="facebook" * size="sm" * style="margin-right: 7px;"> * </svg> * Hello Tab 1 * </ng-template> * <cds-tabs> * <cds-tab [heading]="tabHeading"> * Tab 1 content <svg cdsIcon="alert" size="lg"></svg> * </cds-tab> * <cds-tab heading='Tab2'> * Tab 2 content * </cds-tab> * <cds-tab heading='Tab3'> * Tab 3 content * </cds-tab> * </cds-tabs> * ``` */ export declare class Tab implements OnInit { private static counter; /** * Boolean value reflects if the `Tab` is using a custom template for the heading. * Default value is false. */ headingIsTemplate: boolean; /** * The `Tab`'s title to be displayed or custom temaplate for the `Tab` heading. */ heading: string | TemplateRef<any>; /** * Optional override for the `tabItem's`'s title attribute which is set in `TabHeaders`. * `tabItem`'s title attribute is automatically set to `heading`. * * You might want to use this if you set `heading` to a `TemplateRef`. */ title: string; /** * Allows the user to pass data to the custom template for the `Tab` heading. */ context: any; /** * Indicates whether the `Tab` is active/selected. * Determines whether it's `TabPanel` is rendered. */ active: boolean; /** * Indicates whether or not the `Tab` item is disabled. */ disabled: boolean; tabIndex: number; /** * Sets the id of the `Tab`. Will be uniquely generated if not provided. */ id: string; /** * Set to true to have Tab items cached and not reloaded on tab switching. */ set cacheActive(shouldCache: boolean); /** * Allows life cycle hooks to be called on the rendered content */ tabContent: TemplateRef<any>; /** * Optional data for templates passed as implicit context */ templateContext: any; /** * Value 'selected' to be emitted after a new `Tab` is selected. */ selected: EventEmitter<void>; /** * Used to set the id property on the element. */ attrClass: string; get cacheActive(): boolean; protected _cacheActive: boolean; /** * Checks for custom heading template on initialization and updates the value * of the boolean 'headingIsTemplate'. */ ngOnInit(): void; /** * Emit the status of the `Tab`, specifically 'select' and 'selected' properties. */ doSelect(): void; /** * Returns value indicating whether this `Tab` should be rendered in a `TabPanel`. */ shouldRender(): boolean; isTemplate(value: any): boolean; static ɵfac: i0.ɵɵFactoryDeclaration<Tab, never>; static ɵcmp: i0.ɵɵComponentDeclaration<Tab, "cds-tab, ibm-tab", never, { "heading": "heading"; "title": "title"; "context": "context"; "active": "active"; "disabled": "disabled"; "tabIndex": "tabIndex"; "id": "id"; "cacheActive": "cacheActive"; "tabContent": "tabContent"; "templateContext": "templateContext"; }, { "selected": "selected"; }, never, ["*"], false>; }