gentics-ui-core/components/tabs/tabs.component.d.ts

This is the common core framework for the Gentics CMS and Mesh UI, and other Angular applications.

import { QueryList, AfterContentInit, EventEmitter, SimpleChanges, OnChanges, OnDestroy } from '@angular/core';
import { Tab } from './tab.component';
import { Subscription } from 'rxjs';
import * as i0 from "@angular/core";
/**
 * Tabs can be either pure or stateful. Stateful tabs will keep track of which one is active by keeping an internal
 * state.
 *
 * Pure tabs will only change the active tab when the `activeId` property is updated.
 *
 * ## Stateful Tabs
 * ```html
 * <gtx-tabs (tabChange)="goToTab($event)">
 *     <gtx-tab title="Details">Optional content here.</gtx-tab>
 *     <gtx-tab title="Orders"></gtx-tab>
 *     <gtx-tab title="Notes"></gtx-tab>
 * </gtx-tabs>
 * ```
 *
 * ## Pure Tabs
 * ```html
 * <gtx-tabs pure [activeId]="activeTab">
 *     <gtx-tab title="Details" id="1" (select)="activeTab = $event"></gtx-tab>
 *     <gtx-tab title="Orders" id="2" (select)="activeTab = $event"></gtx-tab>
 *     <gtx-tab title="Notes" id="3" (select)="activeTab = $event"></gtx-tab>
 * </gtx-tabs>
 * ```
 *
 * ## With `routerLink`
 * A gtx-tab can take an optional `[routerLink]` binding which will set router links for the tabs.
 * ```html
 * <gtx-tabs pure [activeId]="activeTab">
 *     <gtx-tab title="Details" id="1" [routerLink]="['customer', 'details']"></gtx-tab>
 *     <gtx-tab title="Orders" id="2" [routerLink]="['customer', 'orders']"></gtx-tab>
 *     <gtx-tab title="Notes" id="3" [routerLink]="['customer', 'notes']"></gtx-tab>
 * </gtx-tabs>
 * ```
 *  * ##### Vertical Tabs
 * A gtx-tabs can take an optional `vertical` property which allows to display tabs vertically.
 * ```html
 * <gtx-tabs vertical>
 *        <gtx-tab title="Details"></gtx-tab>
 *        <gtx-tab title="Orders"></gtx-tab>
 *        <gtx-tab title="Notes"></gtx-tab>
 * </gtx-tabs>
 * ```
 *  *  * ##### Active Tabs with Icons
 * A gtx-tabs can take an optional `hideTitle` property which allows to hide the title for non-active tabs with icons.
 * ```html
 * <gtx-tabs hideTitle>
 *           <gtx-tab icon="folder" title="Tab 1">Tab 1 Content</gtx-tab>
 *           <gtx-tab icon="cloud" title="Tab 2">Tab 2 Content</gtx-tab>
 * </gtx-tabs>
 * ```
 *
 */
export declare class Tabs implements AfterContentInit, OnChanges, OnDestroy {
    tabs: QueryList<Tab>;
    /**
     * Fires an event whenever the active tab changes. Argument is the id of the selected tab.
     */
    tabChange: EventEmitter<string>;
    /**
     * When present (or set to true), tabs are displayed vertically.
     */
    set vertical(val: any);
    /**
     * When present (or set to true), only active tabs with icons will show the title.
     * Non-active tabs with icons will hide the title, show only icon.
     */
    set hideTitle(val: any);
    /**
     * The id of the active tab. Should only be used in pure (stateless) mode.
     */
    activeId: string;
    /**
     * When present, sets the tabs to pure (stateless) mode.
     */
    set pure(val: any);
    /**
     * When present (or set to true), tabs which do not fit into the width of their container will wrap onto
     * a new line. Otherwise, tabs will remain on one line and the contents will be elided if all the available
     * space is filled.
     */
    set wrap(val: any);
    shouldHideTitle: boolean;
    verticalTabs: boolean;
    tabsShouldWrap: boolean;
    private isPure;
    tabsChangeSubscription: Subscription;
    ngAfterContentInit(): void;
    ngOnChanges(changes: SimpleChanges): void;
    ngOnDestroy(): void;
    /**
     * Sets the tab with id === this.activeId to active.
     */
    setActiveTab(): void;
    /**
     * Invoked when a tab link is clicked.
     */
    selectTab(tab: Tab): void;
    private setAsActive;
    static ɵfac: i0.ɵɵFactoryDeclaration<Tabs, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<Tabs, "gtx-tabs", never, { "vertical": "vertical"; "hideTitle": "hideTitle"; "activeId": "activeId"; "pure": "pure"; "wrap": "wrap"; }, { "tabChange": "tabChange"; }, ["tabs"], ["*"]>;
}