File

src/tabs/icon-tab.component.ts

Description

Icon-only approach for cds-tab variant: [icon] template plus label for tooltip.

Example :

<ng-template #i><svg cdsIcon="activity" size="16"></svg></ng-template>
<cds-tabs>
  <cds-icon-tab label="Activity" [icon]="i">Panel</cds-icon-tab>
</cds-tabs>

Extends

Tab

Metadata

providers { provide: Tab, useExisting: forwardRef(() => IconTab) }

selector cds-icon-tab, ibm-icon-tab

template

<ng-container *ngIf="shouldRender()">
	<ng-template
		*ngIf="isTemplate(tabContent)"
		[ngTemplateOutlet]="tabContent"
		[ngTemplateOutletContext]="{ $implicit: templateContext }">
	</ng-template>
	<ng-content></ng-content>
</ng-container>

Index

Inputs

label
Type : `string`
Defined in src/tabs/icon-tab.component.ts:40
Accessible label and tooltip text for the icon tab.

active
Type : `boolean`
Default value : `false`
Inherited from `Tab`
Defined in `Tab:125`
Indicates whether the `Tab` is active/selected. Determines whether its tab panel content is rendered.

badgeIndicator
Type : `boolean`
Default value : `false`
Inherited from `Tab`
Defined in `Tab:172`
Preview: Icon-only tabs — show a notification dot on the icon.

cacheActive
Type : `boolean`
Inherited from `Tab`
Defined in `Tab:89`
Set to `true` to have `Tab` items cached and not reloaded on tab switching.

closeButtonAriaLabel
Type : `string`
Default value : `"Press delete to remove tab"`
Inherited from `Tab`
Defined in `Tab:160`
Sets the aria-label of the close button when the parent `Tabs` uses `dismissable`.

context
Type : `any`
Inherited from `Tab`
Defined in `Tab:120`
Allows the user to pass data to the custom template for the `Tab` heading.

disabled
Type : `boolean`
Default value : `false`
Inherited from `Tab`
Defined in `Tab:129`
Indicates whether or not the `Tab` item is disabled.

enterDelayMs
Type : `number`
Inherited from `Tab`
Defined in `Tab:176`
Icon-only tabs: tooltip show delay (ms).

heading
Type : `string \| TemplateRef<any>`
Inherited from `Tab`
Defined in `Tab:109`
The `Tab`'s title to be displayed or custom template for the `Tab` heading.

icon
Type : `TemplateRef<any>`
Inherited from `Tab`
Defined in `Tab:151`
Optional template that renders an icon inside the `Tab` header. Useful for rendering a `cdsIcon` or any other icon next to the tab label.

iconLabel
Type : `string`
Inherited from `Tab`
Defined in `Tab:168`
Icon-only tabs: accessible name and tooltip text.

iconOnly
Type : `boolean`
Default value : `false`
Inherited from `Tab`
Defined in `Tab:164`
Icon-only tab: pair with `icon` and `iconLabel`.

id
Type : `string`
Default value : `n-tab-${Tab.counter++}`
Inherited from `Tab`
Defined in `Tab:138`
Sets the id of the `Tab`. Will be uniquely generated if not provided.

isTooltipOpen
Type : `boolean`
Default value : `false`
Inherited from `Tab`
Defined in `Tab:184`
Icon-only tabs: open the tooltip on first render.

leaveDelayMs
Type : `number`
Inherited from `Tab`
Defined in `Tab:180`
Icon-only tabs: tooltip hide delay (ms).

secondaryLabel
Type : `string`
Inherited from `Tab`
Defined in `Tab:156`
Optional secondary label rendered below the primary tab label. Only displayed when the parent `Tabs` is using `type="contained"`.

tabContent
Type : `TemplateRef<any>`
Inherited from `Tab`
Defined in `Tab:142`
Allows lifecycle hooks to be called on the rendered content.

tabIndex
Type : `number`
Default value : `0`
Inherited from `Tab`
Defined in `Tab:134`
`tabindex` on the tab panel, the parent may set this to `null` when `isNavigation` is `true`.

templateContext
Type : `any`
Inherited from `Tab`
Defined in `Tab:146`
Optional data for templates passed as implicit context.

title
Type : `string`
Inherited from `Tab`
Defined in `Tab:116`
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`.

Outputs

selected
Type : `EventEmitter<void>`
Inherited from `Tab`
Defined in `Tab:188`
Emits when this tab becomes selected.

tabClose
Type : `EventEmitter<void>`
Inherited from `Tab`
Defined in `Tab:192`
Emits when this tab's close button is pressed.

HostBindings

attr.aria-labelledby

Type : string

Inherited from Tab

Defined in Tab:71

attr.aria-live

Type : string

Default value : "polite"

Inherited from Tab

Defined in Tab:99

attr.hidden

Type : string

Inherited from Tab

Defined in Tab:80

hidden + display keep inactive panels out of layout; null display when active preserves grid/flex.

attr.id

Type : string

Inherited from Tab

Defined in Tab:68

attr.role

Type : string

Default value : "tabpanel"

Inherited from Tab

Defined in Tab:98

attr.tabindex

Type : number

Inherited from Tab

Defined in Tab:74

class.cds--tab-content

Type : boolean

Default value : true

Inherited from Tab

Defined in Tab:97

style.display

Type : "block" | "none"

Inherited from Tab

Defined in Tab:83

Methods

doSelect

doSelect()

Inherited from Tab

Defined in Tab:209

Emit the status of the Tab, specifically 'select' and 'selected' properties.

Returns : void

Public isTemplate

isTemplate(value)

Inherited from Tab

Defined in Tab:220

Parameters :

Name	Optional
value	No

Returns : boolean

ngOnInit

ngOnInit()

Inherited from Tab

Defined in Tab:200

Checks for custom heading template on initialization and updates the value of the boolean 'headingIsTemplate'.

Returns : void

shouldRender

shouldRender()

Inherited from Tab

Defined in Tab:216

Returns value indicating whether this Tab should be rendered in a tab panel.

Returns : boolean

Properties

iconOnly

Default value : true

Defined in src/tabs/icon-tab.component.ts:51

Icon tabs are only for icons, so iconOnly by default

Protected _cacheActive

Default value : false

Inherited from Tab

Defined in Tab:194

Private Static counter

Type : number

Default value : 0

Inherited from Tab

Defined in Tab:96

Public headingIsTemplate

Default value : false

Inherited from Tab

Defined in Tab:104

Boolean value reflects if the Tab is using a custom template for the heading. Default value is false.

panelAriaLive

Type : string

Default value : "polite"

Decorators :


                            @HostBinding('attr.aria-live')

Inherited from Tab

Defined in Tab:99

panelRole

Type : string

Default value : "tabpanel"

Decorators :


                            @HostBinding('attr.role')

Inherited from Tab

Defined in Tab:98

tabContentClass

Default value : true

Decorators :


                            @HostBinding('class.cds--tab-content')

Inherited from Tab

Defined in Tab:97

Accessors

label

getlabel()

Defined in src/tabs/icon-tab.component.ts:44

setlabel(value: string)

Defined in src/tabs/icon-tab.component.ts:40

Accessible label and tooltip text for the icon tab.

Parameters :

Name	Type	Optional
value	`string`	No

Returns : void

import {
	Component,
	forwardRef,
	Input
} from "@angular/core";
import { Tab } from "./tab.component";

/**
 * Icon-only approach for `cds-tab` variant: `[icon]` template plus `label` for tooltip.
 *
 * ```html
 * <ng-template #i><svg cdsIcon="activity" size="16"></svg></ng-template>
 * <cds-tabs>
 *   <cds-icon-tab label="Activity" [icon]="i">Panel</cds-icon-tab>
 * </cds-tabs>
 * ```
 */
@Component({
	selector: "cds-icon-tab, ibm-icon-tab",
	template: `
		<ng-container *ngIf="shouldRender()">
			<ng-template
				*ngIf="isTemplate(tabContent)"
				[ngTemplateOutlet]="tabContent"
				[ngTemplateOutletContext]="{ $implicit: templateContext }">
			</ng-template>
			<ng-content></ng-content>
		</ng-container>
	`,
	providers: [
		// tslint:disable-next-line:no-forward-ref
		{ provide: Tab, useExisting: forwardRef(() => IconTab) }
	]
})
export class IconTab extends Tab {
	/**
	 * Accessible label and tooltip text for the icon tab.
	 */
	@Input()
	set label(value: string) {
		this.iconLabel = value;
	}

	get label(): string {
		return this.iconLabel;
	}

	/**
	 * Icon tabs are only for icons, so iconOnly by default
	 */
	override iconOnly = true;
}

Legend

Html element

Component

Html element with directive

File

Description

Extends

Metadata

Index

Properties

Methods

Inputs

Outputs

HostBindings

Accessors

Inputs

Outputs

HostBindings

Methods

Properties

Accessors

results matching ""

No results matching ""