82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright Google LLC All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.dev/license
|
|
*/
|
|
|
|
import {
|
|
AfterContentChecked,
|
|
AfterContentInit,
|
|
AfterViewInit,
|
|
ChangeDetectionStrategy,
|
|
Component,
|
|
ContentChildren,
|
|
ElementRef,
|
|
Input,
|
|
OnDestroy,
|
|
QueryList,
|
|
ViewChild,
|
|
ViewEncapsulation,
|
|
booleanAttribute,
|
|
} from '@angular/core';
|
|
import {MatTabLabelWrapper} from './tab-label-wrapper';
|
|
import {MatInkBar} from './ink-bar';
|
|
import {MatPaginatedTabHeader} from './paginated-tab-header';
|
|
import {CdkObserveContent} from '@angular/cdk/observers';
|
|
import {MatRipple} from '@angular/material/core';
|
|
|
|
/**
|
|
* The header of the tab group which displays a list of all the tabs in the tab group. Includes
|
|
* an ink bar that follows the currently selected tab. When the tabs list's width exceeds the
|
|
* width of the header container, then arrows will be displayed to allow the user to scroll
|
|
* left and right across the header.
|
|
* @docs-private
|
|
*/
|
|
@Component({
|
|
selector: 'mat-tab-header',
|
|
templateUrl: 'tab-header.html',
|
|
styleUrl: 'tab-header.css',
|
|
encapsulation: ViewEncapsulation.None,
|
|
// tslint:disable-next-line:validate-decorators
|
|
changeDetection: ChangeDetectionStrategy.Default,
|
|
host: {
|
|
'class': 'mat-mdc-tab-header',
|
|
'[class.mat-mdc-tab-header-pagination-controls-enabled]': '_showPaginationControls',
|
|
'[class.mat-mdc-tab-header-rtl]': "_getLayoutDirection() == 'rtl'",
|
|
},
|
|
imports: [MatRipple, CdkObserveContent],
|
|
})
|
|
export class MatTabHeader
|
|
extends MatPaginatedTabHeader
|
|
implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy
|
|
{
|
|
@ContentChildren(MatTabLabelWrapper, {descendants: false}) _items: QueryList<MatTabLabelWrapper>;
|
|
@ViewChild('tabListContainer', {static: true}) _tabListContainer: ElementRef;
|
|
@ViewChild('tabList', {static: true}) _tabList: ElementRef;
|
|
@ViewChild('tabListInner', {static: true}) _tabListInner: ElementRef;
|
|
@ViewChild('nextPaginator') _nextPaginator: ElementRef<HTMLElement>;
|
|
@ViewChild('previousPaginator') _previousPaginator: ElementRef<HTMLElement>;
|
|
_inkBar: MatInkBar;
|
|
|
|
/** Aria label of the header. */
|
|
@Input('aria-label') ariaLabel: string;
|
|
|
|
/** Sets the `aria-labelledby` of the header. */
|
|
@Input('aria-labelledby') ariaLabelledby: string;
|
|
|
|
/** Whether the ripple effect is disabled or not. */
|
|
@Input({transform: booleanAttribute})
|
|
disableRipple: boolean = false;
|
|
|
|
override ngAfterContentInit() {
|
|
this._inkBar = new MatInkBar(this._items);
|
|
super.ngAfterContentInit();
|
|
}
|
|
|
|
protected _itemSelected(event: KeyboardEvent) {
|
|
event.preventDefault();
|
|
}
|
|
}
|