carbon-components-angular
Version:
Next generation components
142 lines (138 loc) • 4.53 kB
TypeScript
/**
*
* 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>;
}