### File

`src/tabs/tabs.component.ts`

### Description

Build out your application's tabs using this component. This is the parent of the `Tab` and `TabHeader` components.

See demo

`Tabs` expects a set of `n-tab` elements

     * <ibm-tabs>
     *     <ibm-tab heading='tab1'>
     *         tab 1 content
     *     </ibm-tab>
     *     <ibm-tab heading='tab1'>
     *         tab 2 content
     *     </ibm-tab>
     *     <!-- ... -->
     *     <ibm-tab heading='tab1'>
     *         tab n content
     *     </ibm-tab>
     * </ibm-tabs>
     *

../../iframe.html?id=tabs--basic

### Implements

`AfterContentInit` `OnChanges`

### Metadata

selector | `ibm-tabs`
template |
    <ibm-tab-headers
    	*ngIf="hasTabHeaders() && position === 'top'"
    	[skeleton]="skeleton"
    	[tabs]="tabs"
    	[followFocus]="followFocus"
    	[cacheActive]="cacheActive"
    	[contentBefore]="before"
    	[contentAfter]="after"
    	[ariaLabel]="ariaLabel"
    	[ariaLabelledby]="ariaLabelledby">
    </ibm-tab-headers>
    <ng-content></ng-content>
    <ng-template #before>
    	<ng-content select="[before]"></ng-content>
    </ng-template>
    <ng-template #after>
    	<ng-content select="[after]"></ng-content>
    </ng-template>
    <ibm-tab-headers
    	*ngIf="hasTabHeaders() && position === 'bottom'"
    	[skeleton]="skeleton"
    	[tabs]="tabs"
    	[cacheActive]="cacheActive">
    </ibm-tab-headers>

### Index

###### Properties
tabHeaders tabs
###### Methods
hasTabHeaders ngAfterContentInit ngOnChanges
###### Inputs
ariaLabel ariaLabelledby cacheActive followFocus isNavigation position skeleton

### Inputs

`ariaLabel` | Sets the aria label on the `TabHeader`s nav element. Type : `string`
Defined in src/tabs/tabs.component.ts:94

`ariaLabelledby` | Sets the aria labelledby on the `TabHeader`s nav element. Type : `string`
Defined in src/tabs/tabs.component.ts:98

`cacheActive` | Set to 'true' to have `Tab` items cached and not reloaded on tab switching. Default value : `false`
Defined in src/tabs/tabs.component.ts:78

`followFocus` | Set to 'true' to have tabs automatically activated and have their content displayed when they receive focus. Default value : `true`
Defined in src/tabs/tabs.component.ts:82

`isNavigation` | Set to `true` to have the tabIndex of the all tabpanels be -1. Default value : `false`
Defined in src/tabs/tabs.component.ts:90

`position` | Takes either the string value 'top' or 'bottom' to place TabHeader relative to the `TabPanel`s. Type : `"top" | "bottom"` Default value : `"top"`
Defined in src/tabs/tabs.component.ts:74

`skeleton` | Set to `true` to put tabs in a loading state. Default value : `false`
Defined in src/tabs/tabs.component.ts:86

### Methods

hasTabHeaders
`hasTabHeaders()`
Defined in src/tabs/tabs.component.ts:132
true if the n-tab's are passed directly to the component as children Returns : `boolean`

ngAfterContentInit
`ngAfterContentInit()`
Defined in src/tabs/tabs.component.ts:113
After content is initialized update `Tab`s to cache (if turned on) and set the initial selected Tab item. Returns : `void`

ngOnChanges
`ngOnChanges(changes: SimpleChanges)`
Defined in src/tabs/tabs.component.ts:123
Parameters :
Name | Type | Optional
changes | `SimpleChanges` | No
Returns : `void`

### Properties

tabHeaders
`tabHeaders: ```
Decorators : `@ContentChild(TabHeaders)`
Defined in src/tabs/tabs.component.ts:107
Content child of the projected header component

tabs
`tabs: `QueryList<Tab>``
Type : `QueryList<Tab>`
Decorators : `@ContentChildren(Tab, {descendants: undefined})`
Defined in src/tabs/tabs.component.ts:103
Maintains a `QueryList` of the `Tab` elements and updates if `Tab`s are added or removed.

    import {
    	Component,
    	Input,
    	ContentChildren,
    	QueryList,
    	AfterContentInit,
    	ContentChild,
    	OnChanges,
    	SimpleChanges
    } from "@angular/core";
    import { Tab } from "./tab.component";
    import { TabHeaders } from "./tab-headers.component";

    /**
     * Build out your application's tabs using this component.
     * This is the parent of the `Tab` and `TabHeader` components.
     *
     * [See demo](../../?path=/story/tabs--basic)
     *
     * `Tabs` expects a set of `n-tab` elements
     *
     * ```html
     * <ibm-tabs>
     * 	<ibm-tab heading='tab1'>
     * 		tab 1 content
     * 	</ibm-tab>
     * 	<ibm-tab heading='tab1'>
     * 		tab 2 content
     * 	</ibm-tab>
     * 	<!-- ... -->
     * 	<ibm-tab heading='tab1'>
     * 		tab n content
     * 	</ibm-tab>
     * </ibm-tabs>
     * ```
     *
     * <example-url>../../iframe.html?id=tabs--basic</example-url>
     */
    @Component({
    	selector: "ibm-tabs",
    	template: `
    			<ibm-tab-headers
    				*ngIf="hasTabHeaders() && position === 'top'"
    				[skeleton]="skeleton"
    				[tabs]="tabs"
    				[followFocus]="followFocus"
    				[cacheActive]="cacheActive"
    				[contentBefore]="before"
    				[contentAfter]="after"
    				[ariaLabel]="ariaLabel"
    				[ariaLabelledby]="ariaLabelledby">
    			</ibm-tab-headers>
    			<ng-content></ng-content>
    			<ng-template #before>
    				<ng-content select="[before]"></ng-content>
    			</ng-template>
    			<ng-template #after>
    				<ng-content select="[after]"></ng-content>
    			</ng-template>
    			<ibm-tab-headers
    				*ngIf="hasTabHeaders() && position === 'bottom'"
    				[skeleton]="skeleton"
    				[tabs]="tabs"
    				[cacheActive]="cacheActive">
    			</ibm-tab-headers>
    	`
    })
    export class Tabs implements AfterContentInit, OnChanges {
    	/**
    	 * Takes either the string value 'top' or 'bottom' to place TabHeader
    	 * relative to the `TabPanel`s.
    	 */
    	@Input() position: "top" | "bottom" = "top";
    	/**
    	 * Set to 'true' to have `Tab` items cached and not reloaded on tab switching.
    	 */
    	@Input() cacheActive = false;
    	/**
    	 * Set to 'true' to have tabs automatically activated and have their content displayed when they receive focus.
    	 */
    	@Input() followFocus = true;
    	/**
    	 * Set to `true` to put tabs in a loading state.
    	 */
    	@Input() skeleton = false;
    	/**
    	 * Set to `true` to have the tabIndex of the all tabpanels be -1.
    	 */
    	@Input() isNavigation = false;
    	/**
    	 * Sets the aria label on the `TabHeader`s nav element.
    	 */
    	@Input() ariaLabel: string;
    	/**
    	 * Sets the aria labelledby on the `TabHeader`s nav element.
    	 */
    	@Input() ariaLabelledby: string;

    	/**
    	 * Maintains a `QueryList` of the `Tab` elements and updates if `Tab`s are added or removed.
    	 */
    	@ContentChildren(Tab, { descendants: false }) tabs: QueryList<Tab>;
    	/**
    	 * Content child of the projected header component
    	 */
    	@ContentChild(TabHeaders) tabHeaders;

    	/**
    	 * After content is initialized update `Tab`s to cache (if turned on) and set the initial
    	 * selected Tab item.
    	 */
    	ngAfterContentInit() {
    		if (this.tabHeaders) {
    			this.tabHeaders.cacheActive = this.cacheActive;
    		}

    		this.tabs.forEach(tab => {
    			tab.tabIndex = this.isNavigation ? -1 : 0;
    		});
    	}

    	ngOnChanges(changes: SimpleChanges) {
    		if (this.tabHeaders && changes.cacheActive) {
    			this.tabHeaders.cacheActive = this.cacheActive;
    		}
    	}

    	/**
    	 * true if the n-tab's are passed directly to the component as children
    	 */
    	hasTabHeaders() {
    		return this.tabs.length > 0;
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""